tabsBeginner
Tab Navigation
Underlined tab navigation with active indicator.
Claude prompt
Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.
Build a tab navigation with Tailwind: a row of tab links with a thin border-b under the active tab in a brand color (e.g. indigo-600). Inactive tabs are muted gray with a transparent border. Hover state shows a subtle border. Wrap in a container with a base border-b that the active tab overlays.
Code
html
<!--
Source: Mark Mead (HyperUI)
https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/tabs/1.html
License: MIT
Surfaced via https://vibedex.io/components/hyperui-app-tabs
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
<div class="mx-auto max-w-3xl p-6 w-full">
<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>
</div>
</div>