Application Tabs Base

Live Preview
<div class="-mb-px border-b border-gray-200">
      <div role="tablist" class="flex gap-1">
        <button
          role="tab"
          aria-selected="true"
          class="border-b-2 border-blue-600 px-4 py-2 text-sm font-medium text-blue-600 transition-colors hover:text-blue-700"
        >
          Profile
        </button>

        <button
          role="tab"
          aria-selected="false"
          class="border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700"
        >
          Account
        </button>

        <button
          role="tab"
          aria-selected="false"
          class="border-b-2 border-transparent px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:text-gray-700"
        >
          Notifications
        </button>
      </div>
    </div>

    <div role="tabpanel" class="mt-4">
      <p class="text-gray-700">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic dicta
        quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste odio
        consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos, temporibus
        perspiciatis!
      </p>
    </div>

Related components

More items from the merged UI library.

View all