? Tabs and Accordions with Tailwind CSS

Tabs and accordions are great UI patterns to organize content into sections, improving user experience by showing/hiding content dynamically.

Tabs

Tabs let users switch between different views or content panels without leaving the page.

Basic Tabs Example

<div>  <nav class="flex border-b border-gray-300">    <button class="py-2 px-4 text-blue-600 border-b-2 border-blue-600 font-semibold">      Tab 1    </button>    <button class="py-2 px-4 text-gray-600 hover:text-blue-600">      Tab 2    </button>    <button class="py-2 px-4 text-gray-600 hover:text-blue-600">      Tab 3    </button>  </nav>  <div class="p-4">    <div>      <p>Content for Tab 1</p>    </div>  </div></div>

Explanation:

• Active tab has text-blue-600 and bottom border border-b-2 border-blue-600

• Inactive tabs have muted color text-gray-600 and hover effect

• Content below tabs changes based on active tab (requires JS for dynamic switching)

Tabs with Basic JavaScript Toggle

<div>  <nav class="flex border-b border-gray-300">    <button      class="tab-btn py-2 px-4 text-blue-600 border-b-2 border-blue-600 font-semibold"      data-tab="1"    >      Tab 1    </button>    <button class="tab-btn py-2 px-4 text-gray-600 hover:text-blue-600" data-tab="2">      Tab 2    </button>    <button class="tab-btn py-2 px-4 text-gray-600 hover:text-blue-600" data-tab="3">      Tab 3    </button>  </nav>  <div class="p-4">    <div class="tab-content" data-tab="1">      <p>Content for Tab 1</p>    </div>    <div class="tab-content hidden" data-tab="2">      <p>Content for Tab 2</p>    </div>    <div class="tab-content hidden" data-tab="3">      <p>Content for Tab 3</p>    </div>  </div></div><script>  const tabs = document.querySelectorAll('.tab-btn');  const contents = document.querySelectorAll('.tab-content');  tabs.forEach(tab => {    tab.addEventListener('click', () => {      // Remove active classes      tabs.forEach(t => {        t.classList.remove('border-blue-600', 'text-blue-600', 'font-semibold');        t.classList.add('text-gray-600');      });      contents.forEach(c => c.classList.add('hidden'));      // Add active classes to clicked tab and show content      tab.classList.add('border-blue-600', 'text-blue-600', 'font-semibold');      tab.classList.remove('text-gray-600');      const tabId = tab.getAttribute('data-tab');      document.querySelector(`.tab-content[data-tab="${tabId}"]`).classList.remove('hidden');    });  });</script>

Accordions

Accordions let users expand/collapse sections of content.

Basic Accordion Example

<div class="space-y-2">  <div class="border rounded">    <button class="w-full px-4 py-2 text-left bg-gray-100 hover:bg-gray-200 focus:outline-none flex justify-between items-center">      <span>Section 1</span>      <svg class="w-5 h-5 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />      </svg>    </button>    <div class="px-4 py-2 hidden">      <p>Content for section 1</p>    </div>  </div>  <div class="border rounded">    <button class="w-full px-4 py-2 text-left bg-gray-100 hover:bg-gray-200 focus:outline-none flex justify-between items-center">      <span>Section 2</span>      <svg class="w-5 h-5 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />      </svg>    </button>    <div class="px-4 py-2 hidden">      <p>Content for section 2</p>    </div>  </div></div>

Accordion JavaScript for Toggle

document.querySelectorAll('button').forEach(button => {  button.addEventListener('click', () => {    const content = button.nextElementSibling;    const icon = button.querySelector('svg');    if (content.classList.contains('hidden')) {      content.classList.remove('hidden');      icon.classList.add('rotate-180');    } else {      content.classList.add('hidden');      icon.classList.remove('rotate-180');    }  });});

Summary of Tailwind Classes Used

Want me to help you build a fully functional tabs or accordion component in React, Vue, or with animations?