Tailwind CSS Tab - Versoly UI

<ul class="tab-list inline-flex gap-x-2 mb-3" role="tablist">
  <li role="presentation">
    <button class="btn btn-primary" data-toggle="pill" data-target="#tab-panel-home" type="button" role="tab" aria-controls="tab-panel-home" aria-selected="true">Home</button>
  </li>
  <li role="presentation">
    <button class="btn btn-ghost btn-primary" data-toggle="pill" data-target="#tab-panel-profile" type="button" role="tab" aria-controls="tab-panel-profile" aria-selected="false">Profile</button>
  </li>
  <li role="presentation">
    <button class="btn btn-ghost btn-primary" data-toggle="pill" data-target="#tab-panel-contact" type="button" role="tab" aria-controls="tab-panel-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" role="tabcontent">
  <div class="tab-pane" role="tabpanel" aria-labelledby="tab-panel-home">
    <h3>Home</h3>
    <p>Lorem home ipsum</p>
  </div>
  <div class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-panel-profile">
    <h3>Profile</h3>
    <p>Lorem profile ipsum</p>
  </div>
  <div class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-panel-contact">
    <h3>Contact</h3>
    <p>Lorem contact ipsum</p>
  </div>
</div>

<ul class="tab-list tab-list-underline inline-flex gap-x-2 mb-3" role="tablist">
  <li role="presentation">
    <button class="tab-underline" data-target="#tab-panel-home" type="button" role="tab" aria-controls="tab-panel-home" aria-selected="true">Home</button>
  </li>
  <li role="presentation">
    <button class="tab-underline" data-target="#tab-panel-profile" type="button" role="tab" aria-controls="tab-panel-profile" aria-selected="false">Profile</button>
  </li>
  <li role="presentation">
    <button class="tab-underline" data-target="#tab-panel-contact" type="button" role="tab" aria-controls="tab-panel-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" role="tabcontent">
  <div class="tab-pane" role="tabpanel" aria-labelledby="tab-panel-home">
    <h3>Home</h3>
    <p>Lorem home ipsum</p>
  </div>
  <div class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-panel-profile">
    <h3>Profile</h3>
    <p>Lorem profile ipsum</p>
  </div>
  <div class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-panel-contact">
    <h3>Contact</h3>
    <p>Lorem contact ipsum</p>
  </div>
</div>