Tab

        <div class="tabs">
          <div class="tab-nav default">
            <button class="tab-link active" data-tab="tab1">Tab link</button>
            <button class="tab-link" data-tab="tab2">Tab link 2</button>
            <button class="tab-link" data-tab="tab3">Tab link 3</button>
          </div>

          <div class="tab-container">

            <!-- SINGLE TAB - add .active class to be shown by default -->
            <div id="tab1" class="tab-content active p-2">
              <h3>Title 1</h3>
              <p>
                Lorem ipsum dolor sit amet.
              </p>
              <a href="#!" class="tab-link" data-tab="tab-2">Next Tab</a>
            </div>

            <!-- SECOND TAB -->
            <div id="tab2" class="tab-content">
              <h3>Title 2</h3>
              <p>
                Lorem ipsum dolor sit amet.
              </p>
              <a href="#!" class="tab-link" data-tab="tab1">Back</a>
              <br>
              <a href="#!" class="tab-link" data-tab="tab3">Next Tab</a>
            </div>

            <!-- THIRD TAB -->
            <div id="tab3" class="tab-content">
              <h3>Title 3</h3>
              <p>
                Lorem ipsum dolor sit amet.
              </p>
              <a href="#!" class="tab-link" data-tab="tab2">Back</a>
            </div>


          </div>
        </div>
        

      <div class="tabs">
    <div class="tab-container">
        <div id="tab-1" class="tab-content active bg-light p-2">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem
                quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda
                molestiae ab deserunt autem ullam consectetur.</p>

            <a href="#!" class="btn primary tab-link" data-tab="tab-2">Next Tab</a>
        </div>

        <div id="tab-2" class="tab-content bg-light p-2">
            <h3>Title 2</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem
                quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda
                molestiae ab deserunt autem ullam consectetur.</p>
            <a href="#!" class="btn primary tab-link" data-tab="tab-1">Back</a>
            <a href="#!" class="btn primary tab-link" data-tab="tab-3">Next Tab</a>
        </div>

        <div id="tab-3" class="tab-content bg-light p-2">
            <h3>Title 3</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem
                quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda
                molestiae ab deserunt autem ullam consectetur.</p>
            <a href="#!" class="btn primary tab-link" data-tab="tab-2">Back</a>
        </div>
    </div>
</div>