Back to Discover
Tailwind CSS Tabs and Accordion Snippet

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-12">

    <!-- Tabs Component -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-2xl font-semibold text-gray-800 mb-6">Tabs Component</h2>

      <div x-data="{ activeTab: 'overview' }">
        <!-- Tab Navigation -->
        <div class="border-b border-gray-200">
          <nav class="flex space-x-8" aria-label="Tabs">
            <button 
                    @click="activeTab = 'overview'"
                    :class="activeTab === 'overview' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors">
              <ion-icon name="document-text-outline" class="text-lg"></ion-icon>
              Overview
            </button>
            <button 
                    @click="activeTab = 'features'"
                    :class="activeTab === 'features' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors">
              <ion-icon name="star-outline" class="text-lg"></ion-icon>
              Features
            </button>
            <button 
                    @click="activeTab = 'settings'"
                    :class="activeTab === 'settings' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                    class="flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors">
              <ion-icon name="settings-outline" class="text-lg"></ion-icon>
              Settings
            </button>
          </nav>
        </div>

        <!-- Tab Content -->
        <div class="mt-6">
          <div x-show="activeTab === 'overview'" x-transition class="text-gray-600">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">Overview</h3>
            <p class="mb-4">This is a clean and minimal tabs component built with Tailwind CSS and Alpine.js. It provides an intuitive way to organize content into separate views.</p>
            <p>The component features smooth transitions, hover effects, and clear visual indicators for the active tab.</p>
          </div>

          <div x-show="activeTab === 'features'" x-transition class="text-gray-600">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">Features</h3>
            <ul class="space-y-2">
              <li class="flex items-start gap-2">
                <ion-icon name="checkmark-circle" class="text-green-500 text-xl mt-0.5"></ion-icon>
                <span>Responsive design that works on all devices</span>
              </li>
              <li class="flex items-start gap-2">
                <ion-icon name="checkmark-circle" class="text-green-500 text-xl mt-0.5"></ion-icon>
                <span>Smooth transitions between tabs</span>
              </li>
              <li class="flex items-start gap-2">
                <ion-icon name="checkmark-circle" class="text-green-500 text-xl mt-0.5"></ion-icon>
                <span>Customizable with Tailwind utility classes</span>
              </li>
            </ul>
          </div>

          <div x-show="activeTab === 'settings'" x-transition class="text-gray-600">
            <h3 class="text-lg font-semibold text-gray-800 mb-3">Settings</h3>
            <p class="mb-4">Configure your preferences and customize the component behavior to match your needs.</p>
            <div class="space-y-3">
              <label class="flex items-center gap-3">
                <input type="checkbox" class="w-4 h-4 text-blue-600 rounded">
                <span>Enable animations</span>
              </label>
              <label class="flex items-center gap-3">
                <input type="checkbox" class="w-4 h-4 text-blue-600 rounded" checked>
                <span>Show icons</span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Component -->
    <div class="bg-white rounded-lg shadow-sm p-6">
      <h2 class="text-2xl font-semibold text-gray-800 mb-6">Accordion Component</h2>

      <div x-data="{ openItem: null }" class="space-y-3">
        <!-- Accordion Item 1 -->
        <div class="border border-gray-200 rounded-lg overflow-hidden">
          <button 
                  @click="openItem = openItem === 1 ? null : 1"
                  class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
            <div class="flex items-center gap-3">
              <ion-icon name="help-circle-outline" class="text-blue-500 text-xl"></ion-icon>
              <span class="font-medium text-gray-800">What is Tailwind CSS?</span>
            </div>
            <ion-icon 
                      :name="openItem === 1 ? 'chevron-up-outline' : 'chevron-down-outline'" 
                      class="text-gray-400 text-xl transition-transform">
            </ion-icon>
          </button>
          <div 
               x-show="openItem === 1" 
               x-transition:enter="transition ease-out duration-300"
               x-transition:enter-start="opacity-0 transform scale-y-0"
               x-transition:enter-end="opacity-100 transform scale-y-100"
               x-transition:leave="transition ease-in duration-200"
               x-transition:leave-start="opacity-100 transform scale-y-100"
               x-transition:leave-end="opacity-0 transform scale-y-0"
               class="px-4 pb-4 text-gray-600 border-t border-gray-100 origin-top">
            <p class="pt-4">Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML.</p>
          </div>
        </div>

        <!-- Accordion Item 2 -->
        <div class="border border-gray-200 rounded-lg overflow-hidden">
          <button 
                  @click="openItem = openItem === 2 ? null : 2"
                  class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
            <div class="flex items-center gap-3">
              <ion-icon name="code-outline" class="text-blue-500 text-xl"></ion-icon>
              <span class="font-medium text-gray-800">What is Alpine.js?</span>
            </div>
            <ion-icon 
                      :name="openItem === 2 ? 'chevron-up-outline' : 'chevron-down-outline'" 
                      class="text-gray-400 text-xl transition-transform">
            </ion-icon>
          </button>
          <div 
               x-show="openItem === 2" 
               x-transition:enter="transition ease-out duration-300"
               x-transition:enter-start="opacity-0 transform scale-y-0"
               x-transition:enter-end="opacity-100 transform scale-y-100"
               x-transition:leave="transition ease-in duration-200"
               x-transition:leave-start="opacity-100 transform scale-y-100"
               x-transition:leave-end="opacity-0 transform scale-y-0"
               class="px-4 pb-4 text-gray-600 border-t border-gray-100 origin-top">
            <p class="pt-4">Alpine.js is a lightweight JavaScript framework that offers reactive and declarative behavior directly in your markup. It's perfect for adding interactivity without the complexity of larger frameworks.</p>
          </div>
        </div>

        <!-- Accordion Item 3 -->
        <div class="border border-gray-200 rounded-lg overflow-hidden">
          <button 
                  @click="openItem = openItem === 3 ? null : 3"
                  class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
            <div class="flex items-center gap-3">
              <ion-icon name="color-palette-outline" class="text-blue-500 text-xl"></ion-icon>
              <span class="font-medium text-gray-800">How do I customize the styling?</span>
            </div>
            <ion-icon 
                      :name="openItem === 3 ? 'chevron-up-outline' : 'chevron-down-outline'" 
                      class="text-gray-400 text-xl transition-transform">
            </ion-icon>
          </button>
          <div 
               x-show="openItem === 3" 
               x-transition:enter="transition ease-out duration-300"
               x-transition:enter-start="opacity-0 transform scale-y-0"
               x-transition:enter-end="opacity-100 transform scale-y-100"
               x-transition:leave="transition ease-in duration-200"
               x-transition:leave-start="opacity-100 transform scale-y-100"
               x-transition:leave-end="opacity-0 transform scale-y-0"
               class="px-4 pb-4 text-gray-600 border-t border-gray-100 origin-top">
            <p class="pt-4">You can easily customize these components by modifying the Tailwind utility classes. Change colors, spacing, borders, and more by adjusting the class names to match your design system.</p>
          </div>
        </div>

        <!-- Accordion Item 4 -->
        <div class="border border-gray-200 rounded-lg overflow-hidden">
          <button 
                  @click="openItem = openItem === 4 ? null : 4"
                  class="w-full flex items-center justify-between p-4 text-left bg-white hover:bg-gray-50 transition-colors">
            <div class="flex items-center gap-3">
              <ion-icon name="phone-portrait-outline" class="text-blue-500 text-xl"></ion-icon>
              <span class="font-medium text-gray-800">Is it mobile responsive?</span>
            </div>
            <ion-icon 
                      :name="openItem === 4 ? 'chevron-up-outline' : 'chevron-down-outline'" 
                      class="text-gray-400 text-xl transition-transform">
            </ion-icon>
          </button>
          <div 
               x-show="openItem === 4" 
               x-transition:enter="transition ease-out duration-300"
               x-transition:enter-start="opacity-0 transform scale-y-0"
               x-transition:enter-end="opacity-100 transform scale-y-100"
               x-transition:leave="transition ease-in duration-200"
               x-transition:leave-start="opacity-100 transform scale-y-100"
               x-transition:leave-end="opacity-0 transform scale-y-0"
               class="px-4 pb-4 text-gray-600 border-t border-gray-100 origin-top">
            <p class="pt-4">Yes! Both the tabs and accordion components are fully responsive and work beautifully on all screen sizes, from mobile phones to desktop displays.</p>
          </div>
        </div>
      </div>
    </div>

  </div>
Comments (0)

No comments yet. Be the first!