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 v3.4. It is responsive.

Tabs

Author Sherry Lynne

Tailwind v3.4 336

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>
      <script>
        const tabsContainers = Array.from(document.querySelectorAll('.tabs'));
for (const tabsContainer of tabsContainers) {
  const tabList = tabsContainer.querySelector(':scope > [role="tablist"]');
  const tabs = Array.from(tabList.querySelectorAll(':scope > [role="tab"]'));
  const tabPanels = Array.from(tabsContainer.querySelectorAll(':scope > .tab-panels > [role="tabpanel"]'));

switch (e.key) {
    case "ArrowRight":
      newIndex = (currentIndex + 1) % tabs.length;
      break;
    case "ArrowLeft":
      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
      break;
    case "Home":
      newIndex = 0;
      break;
    case "End":
      newIndex = tabs.length - 1;
      break;
    default:
      return; // Exit if the key is not recognized.
    }
    e.preventDefault();
    e.stopPropagation();
    tabs[newIndex].focus();
  });

tabs.forEach((tab) => {
    tab.addEventListener("click", (e) => {
      showTab(e.target);
    });
    tab.addEventListener("keydown", (e) => {
      if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          e.stopPropagation();
          showTab(e.target);
      }
    });
  });
  const getTabPanelIdFromHash = () => {
    const hash = window.location.hash.startsWith('#')
      ? window.location.hash.slice(1)
      : window.location.hash;
    if (!hash) {
      return null;
    }
    const params = new URLSearchParams(hash);
    return params.get('tab');
  };

// Uncomment remaining lines to open specified tab if passed throug=h in the hash.
  //  const openTabFromHash = () => {
  //   const tabPanelId = getTabPanelIdFromHash();
  //   if (!tabPanelId) {
  //     return;
  //   }
  //   const targetBtn = document.querySelector(`button[aria-controls~="${tabPanelId}"]`);
  //   if (targetBtn) {
  //     showTab(targetBtn);
  //   }
  // };

// openTabFromHash();

// // If hash changes via back/forward navigation.
  // window.addEventListener('popstate', openTabFromHash);

}

</script>

Related Examples

Switch tabs button

gmer33

3 years ago

17.3k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
Order Management Data Table
A responsive order management table built with Tailwind CSS and DataTables. It includes a navigation bar, sortable data table, order progress indicators, file upload controls, and a footer. The component is suitable for admin dashboards, production workflows, and project tracking interfaces. Tags: Table, Data Table, Dashboard, Admin Panel, File Upload, Progress Bar, Responsive, Tailwind CSS

Alla Telegina

1 month ago

53
chat bar
live chat

gidy

1 year ago

2.2k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Working tabs switch

Fagundo67

3 years ago

15.8k
tabs with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3.7k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

536
cards
cards with background animation

Anonymous

3 years ago

12.6k
Tabs section

Simon Scheffer

3 years ago

14.8k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Alla Telegina

1 year ago

2.1k