Tabs

Brutalist tab components for Tailwind CSS. Bold, minimalist tabbed navigation with stark borders, high contrast, and raw typography. Stripped-down tabs UI for no-nonsense content organization.

4/4 Dark Mode HyperUX Pattern AvailableUpdated: May 21, 2026

Base

markmead

<div class="border-b-2 border-black px-2">
  <div role="tablist" class="-mb-0.5 flex">
    <button
      role="tab"
      aria-selected="true"
      class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Profile
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Account
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Notifications
    </button>
  </div>
</div>

<div role="tabpanel" class="mt-4">
  <p class="text-black">
    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>

Base (Dark)

markmead

<div class="border-b-2 border-black px-2 dark:border-white">
  <div role="tablist" class="-mb-0.5 flex">
    <button
      role="tab"
      aria-selected="true"
      class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:focus:ring-yellow-600"
    >
      Profile
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
    >
      Account
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
    >
      Notifications
    </button>
  </div>
</div>

<div role="tabpanel" class="mt-4">
  <p class="text-black dark:text-white">
    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>

Contained

markmead

<div class="border-b-2 border-black">
  <div role="tablist" class="-mb-0.5 flex">
    <button
      role="tab"
      aria-selected="true"
      class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Profile
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Account
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Notifications
    </button>
  </div>
</div>

<div
  role="tabpanel"
  class="-mt-0.5 border-2 border-black p-4 shadow-[4px_4px_0_0] shadow-black"
>
  <p class="text-black">
    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>

Contained (Dark)

markmead

<div class="border-b-2 border-black dark:border-white">
  <div role="tablist" class="-mb-0.5 flex">
    <button
      role="tab"
      aria-selected="true"
      class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:focus:ring-yellow-600"
    >
      Profile
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
    >
      Account
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
    >
      Notifications
    </button>
  </div>
</div>

<div
  role="tabpanel"
  class="-mt-0.5 border-2 border-black p-4 shadow-[4px_4px_0_0] shadow-black dark:border-white dark:shadow-white"
>
  <p class="text-black dark:text-white">
    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>

Pills

markmead

<div>
  <div role="tablist" class="-mb-0.5 flex gap-3">
    <button
      role="tab"
      aria-selected="true"
      class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Profile
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-black px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Account
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-black px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Notifications
    </button>
  </div>
</div>

<div role="tabpanel" class="mt-4">
  <p class="text-black">
    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>

Pills (Dark)

markmead

<div>
  <div role="tablist" class="-mb-0.5 flex gap-3">
    <button
      role="tab"
      aria-selected="true"
      class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:shadow-white dark:focus:ring-yellow-600"
    >
      Profile
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-black px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:text-white dark:shadow-white dark:focus:ring-yellow-600"
    >
      Account
    </button>

    <button
      role="tab"
      aria-selected="false"
      class="border-2 border-black px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] shadow-black hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:text-white dark:shadow-white dark:focus:ring-yellow-600"
    >
      Notifications
    </button>
  </div>
</div>

<div role="tabpanel" class="mt-4">
  <p class="text-black dark:text-white">
    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>

Vertical

markmead

<div class="flex gap-8">
  <div class="border-r-2 border-black py-2">
    <div role="tablist" class="-mr-0.5 flex flex-col">
      <button
        role="tab"
        aria-selected="true"
        class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        General
      </button>

      <button
        role="tab"
        aria-selected="false"
        class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        Privacy
      </button>

      <button
        role="tab"
        aria-selected="false"
        class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        Security
      </button>
    </div>
  </div>

  <div role="tabpanel" class="flex-1 py-2">
    <p class="text-black">
      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>

Vertical (Dark)

markmead

<div class="flex gap-8">
  <div class="border-r-2 border-black py-2 dark:border-white">
    <div role="tablist" class="-mr-0.5 flex flex-col">
      <button
        role="tab"
        aria-selected="true"
        class="border-2 border-black bg-yellow-200 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:border-white dark:bg-yellow-700 dark:text-white dark:focus:ring-yellow-600"
      >
        General
      </button>

      <button
        role="tab"
        aria-selected="false"
        class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
      >
        Privacy
      </button>

      <button
        role="tab"
        aria-selected="false"
        class="border-2 border-transparent px-6 py-2 font-semibold text-black hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:hover:bg-white dark:hover:text-gray-900 dark:focus:ring-yellow-600"
      >
        Security
      </button>
    </div>
  </div>

  <div role="tabpanel" class="flex-1 py-2">
    <p class="text-black dark:text-white">
      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>

View all neobrutalism components