Usage

<div class="tab-container">
    <ul class="tabs">
        <li><a href="#tab1" class="ripple-e">Tab 1</a></li>
        <li><a href="#tab2" class="ripple-e">Tab 2</a></li>
        <li><a href="#tab3" class="ripple-e">Tab 3</a></li>
    </ul>
    <div id="tab1" class="tab-content p-2">
        <h1 class="h4">Tab 1</h1>
        <br />
        <p>Content</p>
    </div>
    <div id="tab2" class="tab-content p-2">
        <h1 class="h4">Tab 2</h1>
        <br />
        <p>Content</p>
    </div>
    <div id="tab3" class="tab-content p-2">
        <h1 class="h4">Tab 3</h1>
        <br />
        <p>Content</p>
    </div>
</div>

No function

<ul class="tabs no-function">
    <li><a href="#!" class="ripple-e active">Tab 1</a></li>
    <li><a href="#!" class="ripple-e">Tab 2</a></li>
    <li><a href="#!" class="ripple-e">Tab 3</a></li>
</ul>