Tabs
Tabs

Tab 1 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.

Tab 2 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, enim, dolor! Reiciendis, corporis, laudantium, odio illo dolores numquam eligendi expedita assumenda eaque doloremque quidem quam nam qui ducimus delectus nemo?

Tab 3 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.

Tab 4 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.

Tab 5 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.

Tab 6 Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.

<div class="tab-component">

  <div class="tabs">
    <ul>
      <li class="js-active"><a class="h5" href="#" data-ref="#tab1"><span>Tab 1</span></a></li>
      <li><a class="h5" href="#" data-ref="#tab2">Tab 2</a></li>
      <li><a class="h5" href="#" data-ref="#tab3">Tab 3</a></li>
      <li><a class="h5" href="#" data-ref="#tab4">Tab 4</a></li>
      <li><a class="h5" href="#" data-ref="#tab5">Tab 5</a></li>
      <li><a class="h5" href="#" data-ref="#tab6">Tab 6</a></li>
    </ul>
  </div>

  <div class="tab-content-container">

    <div id="tab1" class="tab-content js-active">
      <h3>Tab 1 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab2" class="tab-content">
      <h3>Tab 2 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, enim, dolor! Reiciendis, corporis, laudantium, odio illo dolores numquam eligendi expedita assumenda eaque doloremque quidem quam nam qui ducimus delectus nemo?</p>
    </div>

    <div id="tab3" class="tab-content">
      <h3>Tab 3 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab4" class="tab-content">
      <h3>Tab 4 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab5" class="tab-content">
      <h3>Tab 5 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

    <div id="tab6" class="tab-content">
      <h3>Tab 6 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint sapiente odio hic expedita inventore nesciunt numquam placeat minus. Asperiores, repellendus ipsa magni sequi cum reprehenderit dignissimos aliquid ratione. Voluptatum, fugiat.</p>
    </div>

  </div>

</div>