Home
Sherry Lynne
Basic Tabs

Basic Tabs

Trying to simplify tabs while making them accessible and responsive.

This tailwind example is contributed by Sherry Lynne, on 05-Aug-2026. Component is made with Tailwind CSS v3. It is responsive.

Tabs

Author Sherry Lynne

240

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 w-screen h-screen p-5">
        <h1 class="mb-2">
          Sample Tab set, design shifts to button design below large breakpoint
        </h1>

<div class="tabs w-full">
          <div
            class="relative flex flex-wrap lg:flex-nowrap *:text-sm *:text-base *:py-2 lg:*:py-3 *:px-4 font-medium text-sky-700 place-items-stretch"
            role="tablist"
            aria-label="Select your topic"
          >
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn1"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topic1"
            >
              Topic One
            </button>
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn2"
              tabindex="0"
              aria-selected="true"
              aria-controls="tab-topic2"
            >
              Topic Two
            </button>
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn3"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topic3"
            >
              Topic Three (With a Much Longer Name)
            </button>
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn4"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topic4"
            >
              Topic Four
            </button>
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn5"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topic5"
            >
              Topic Five
            </button>
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn6"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topic6"
            >
              Topic Six
            </button>
            <button
              class="tabitem my-1 mr-2 border lg:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 lg:-mb-px lg:aria-selected:border-b-white"
              role="tab"
              id="tab-btn7"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topic7"
            >
              Topic Seven
            </button>
          </div>
          <div
            class="text-base tab-panels *:p-5 *:border *:border-stone-200 bg-white mt-1 lg:mt-0"
          >
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btn1"
              id="tab-topic1"
              class="tab-content"
            >
              <p>Content for Topic One.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              aria-labelledby="tab-btn2"
              id="tab-topic2"
              class="tab-content"
            >
              <p>Content for Topic Two.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btn3"
              id="tab-topic3"
              class="tab-content"
            >
              <p>Content for Topic Three.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btn4"
              id="tab-topic4"
              class="tab-content"
            >
              <p>Content for Topic Four.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btn5"
              id="tab-topic5"
              class="tab-content"
            >
              <p>Content for Topic Five.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btn6"
              id="tab-topic6"
              class="tab-content"
            >
              <p>Content for Topic Six.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btn7"
              id="tab-topic7"
              class="tab-content"
            >
              <p>Content for Topic Seven.</p>
            </div>
          </div>
        </div>
        <h2 class="mt-4 mb-2">
          Another set of tabs, shifts to button design below medium breakpoint
        </h2>
        <div class="tabs w-full">
          <div
            class="relative flex flex-wrap md:flex-nowrap *:text-sm *:text-base *:py-2 *:px-4 lg:*:py-3 font-medium text-sky-700 place-items-stretch"
            role="tablist"
            aria-label="Select your topic"
          >
            <button
              class="tabitem my-1 mr-2 border md:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 md:-mb-px md:aria-selected:border-b-white"
              role="tab"
              id="tab-btna"
              tabindex="0"
              aria-selected="true"
              aria-controls="tab-topica"
            >
              Topic A is first
            </button>
            <button
              class="tabitem my-1 mr-2 border md:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 md:-mb-px md:aria-selected:border-b-white"
              role="tab"
              id="tab-btnb"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topicb"
            >
              Topic B
            </button>
            <button
              class="tabitem my-1 mr-2 border md:m-0 border-neutral-300 bg-neutral-100 aria-selected:font-semibold aria-selected:cursor-default aria-selected:bg-white aria-selected:text-sky-400 aria-selected:border-sky-400 md:-mb-px md:aria-selected:border-b-white"
              role="tab"
              id="tab-btnc"
              tabindex="-1"
              aria-selected="false"
              aria-controls="tab-topicc"
            >
              Topic C is last
            </button>
          </div>
          <div
            class="text-base tab-panels *:p-5 *:border *:border-stone-200 bg-white mt-1 md:mt-0"
          >
            <div
              role="tabpanel"
              tabindex="0"
              aria-labelledby="tab-btna"
              id="tab-topica"
              class="tab-content"
            >
              <p>Content for Topic A.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btnb"
              id="tab-topicb"
              class="tab-content"
            >
              <p>Content for Topic B.</p>
            </div>
            <div
              role="tabpanel"
              tabindex="0"
              hidden
              aria-labelledby="tab-btnc"
              id="tab-topicc"
              class="tab-content"
            >
              <p>Content for Topic C.</p>
            </div>
          </div>
        </div>
      </div>

Related Examples