<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>