Tab section

This tailwind example is contributed by EliteAI Tools, on 06-Jan-2025. Component is made with Tailwind v3.4. It is responsive.

Tabs

Author EliteAI Tools

Tailwind v3.4 2k 4

Fork Fullscreen

<div class="w-full p-4">
  <div class="flex border-b border-gray-300">
    <button
      class="py-2 pr-2 font-semibold text-gray-600 border-b-2 border-transparent sm:pr-4 tab-header hover:text-green-600 focus:outline-none focus:border-green-600 active text-green-600 border-green-600"
      data-tab="tab1">
      Featured Tools
    </button>
    <button
      class="px-4 py-2 font-semibold text-gray-600 border-b-2 border-transparent tab-header hover:text-green-600 focus:outline-none focus:border-green-600"
      data-tab="tab2">
      Recently Added
    </button>
  </div>

<div id="tab1" class="tab-pane active">
      <ul class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 ">
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-3512">
          <span
            class="absolute z-30 px-2 py-1 text-xs text-white transition-transform duration-300 ease-in-out transform rounded-full shadow bg-gradient-to-r from-green-400 to-green-600 -top-1 -right-2 rotate-12 group-hover:scale-105">
            Featured
          </span>

<a class="flex flex-col h-full" data-clickable="Tool:3512:square-card-featuring"
            href="https://eliteai.tools/tool/iris-roads">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/iris-roads/screenshot-large.webp" alt="Iris Roads"
                loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-3512" class="font-semibold ">
                  Iris Roads
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Know your roads. Protect your assets.
                </p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                Iris Roads is an AI-powered infratech solution that automates road maintenance and asset management
                through specialized cameras, flexible dashboards, and intelligent data processing for public and
                private sector organizations.
              </p>

<ul class="flex flex-wrap items-center gap-2 pb-3 mt-auto text-sm" aria-label="Tool features">
                <li class="flex items-center gap-1 px-3 py-1 text-gray-800 bg-gray-100 rounded-full"
                  title="Pricing type">
                  <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                    <path stroke-linecap="round" stroke-linejoin="round"
                      d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z">
                    </path>
                  </svg> <span>Contact for Pricing</span>
                </li>

</ul>
            </div>
          </a>
        </li>
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-280">
          <span
            class="absolute z-30 px-2 py-1 text-xs text-white transition-transform duration-300 ease-in-out transform rounded-full shadow bg-gradient-to-r from-green-400 to-green-600 -top-1 -right-2 rotate-12 group-hover:scale-105">
            Featured
          </span>

<a class="flex flex-col h-full" data-clickable="Tool:280:square-card-featuring"
            href="https://eliteai.tools/tool/ai-thingy">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/ai-thingy/screenshot-large.webp" alt="AI Thingy" loading="lazy"
                decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-280" class="font-semibold ">
                  AI Thingy
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Generate unique content in seconds,
                  not hours</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                AI Thingy accelerates content creation with its AI-powered copywriting, providing high-quality,
                SEO-friendly content in seconds.
              </p>

</ul>
            </div>
          </a>
        </li>
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-1470">
          <span
            class="absolute z-30 px-2 py-1 text-xs text-white transition-transform duration-300 ease-in-out transform rounded-full shadow bg-gradient-to-r from-green-400 to-green-600 -top-1 -right-2 rotate-12 group-hover:scale-105">
            Featured
          </span>

<a class="flex flex-col h-full" data-clickable="Tool:1470:square-card-featuring"
            href="https://eliteai.tools/tool/ai-stickers">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/ai-stickers/screenshot-large.webp" alt="AI Stickers"
                loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-1470" class="font-semibold ">
                  AI Stickers
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Transform Your Ideas Into Premium
                  Quality Stickers with AI</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                AI Stickers is an innovative platform that uses artificial intelligence to create custom stickers from
                text prompts or face photos, offering high-resolution outputs for both digital and physical use.
              </p>

</ul>
            </div>
          </a>
        </li>
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-753">
          <span
            class="absolute z-30 px-2 py-1 text-xs text-white transition-transform duration-300 ease-in-out transform rounded-full shadow bg-gradient-to-r from-green-400 to-green-600 -top-1 -right-2 rotate-12 group-hover:scale-105">
            Featured
          </span>

<a class="flex flex-col h-full" data-clickable="Tool:753:square-card-featuring"
            href="https://eliteai.tools/tool/graphql-ai">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/graphql-ai/screenshot-large.webp" alt="GraphQL AI"
                loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-753" class="font-semibold ">
                  GraphQL AI
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Develop your AI tools, bots, and chat
                  assistants within minutes.</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                GraphQL AI enables developers to quickly create AI-powered tools, bots, and chat assistants using
                advanced, isolated context and integration with leading AI models.
              </p>

<li class="flex items-center gap-1 px-3 py-1 text-gray-800 bg-gray-100 rounded-full"
                  title="Has API support">
                  <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                    aria-hidden="true">
                    <path
                      d="M17 9V12C17 14.7614 14.7614 17 12 17M7 9V12C7 14.7614 9.23858 17 12 17M12 17V21M8 3V6M16 3V6M5 9H19"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg> <span>API</span>
                </li>
              </ul>
            </div>
          </a>
        </li>
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-263">
          <span
            class="absolute z-30 px-2 py-1 text-xs text-white transition-transform duration-300 ease-in-out transform rounded-full shadow bg-gradient-to-r from-green-400 to-green-600 -top-1 -right-2 rotate-12 group-hover:scale-105">
            Featured
          </span>

<a class="flex flex-col h-full" data-clickable="Tool:263:square-card-featuring"
            href="https://eliteai.tools/tool/kailaai">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/kailaai/screenshot-large.webp" alt="Kaila.ai" loading="lazy"
                decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-263" class="font-semibold ">
                  Kaila.ai
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">You are one question away from the
                  correct answer</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                Unlock instant access to accurate information with Kaila's cutting-edge AI, eliminating the need for
                tedious searches.
              </p>

<li class="flex items-center gap-1 px-3 py-1 text-gray-800 bg-gray-100 rounded-full"
                  title="Has API support">
                  <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
                    aria-hidden="true">
                    <path
                      d="M17 9V12C17 14.7614 14.7614 17 12 17M7 9V12C7 14.7614 9.23858 17 12 17M12 17V21M8 3V6M16 3V6M5 9H19"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg> <span>API</span>
                </li>
              </ul>
            </div>
          </a>
        </li>
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-818">
          <span
            class="absolute z-30 px-2 py-1 text-xs text-white transition-transform duration-300 ease-in-out transform rounded-full shadow bg-gradient-to-r from-green-400 to-green-600 -top-1 -right-2 rotate-12 group-hover:scale-105">
            Featured
          </span>

<a class="flex flex-col h-full" data-clickable="Tool:818:square-card-featuring"
            href="https://eliteai.tools/tool/ai-web-designer">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/ai-web-designer/screenshot-large.webp" alt="AI Web Designer"
                loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-818" class="font-semibold ">
                  AI Web Designer
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Design websites with AI</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                AI Web Designer is an innovative tool that generates website designs using artificial intelligence,
                streamlining the web design process for users.
              </p>

</ul>
            </div>
          </a>
        </li>
      </ul>
    </div>

<div id="tab2" class="hidden tab-pane">
      <ul class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 ">
        <li
          class="group relative flex flex-col justify-between bg-white border rounded hover:shadow hover:shadow-gray-200 "
          aria-labelledby="tool-name-6072">

<a class="flex flex-col h-full" data-clickable="Tool:6072:square-card"
            href="https://eliteai.tools/tool/magic-resume-ai">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/magic-resume-ai/screenshot-large.webp" alt="Magic Resume AI"
                loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-6072" class="font-semibold ">
                  Magic Resume AI
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Get More Job Interviews with Our AI
                  Resume Tool</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                Magic Resume AI is an intelligent resume builder that helps job seekers create ATS-optimized resumes
                in minutes. The platform uses AI to transform basic information into professionally-worded resumes
                that increase interview chances.
              </p>

<a class="flex flex-col h-full" data-clickable="Tool:6073:square-card"
            href="https://eliteai.tools/tool/checkr">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/checkr/screenshot-large.webp" alt="Checkr" loading="lazy"
                decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-6073" class="font-semibold ">
                  Checkr
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Modern AI-powered background checks
                  for faster, more accurate hiring</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                Checkr is an AI-powered background check platform that provides fast, accurate screening solutions
                with automated workflows and compliance tools for businesses of all sizes.
              </p>

<a class="flex flex-col h-full" data-clickable="Tool:6070:square-card"
            href="https://eliteai.tools/tool/hubit-plan">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/hubit-plan/screenshot-large.webp" alt="Hubit Plan"
                loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-6070" class="font-semibold ">
                  Hubit Plan
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Beyond task tracking. Beyond apps.
                </p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                Hubit Plan is an intelligent task management service that combines a Telegram bot for quick task
                creation with AI-powered workflow optimization capabilities.
              </p>

<a class="flex flex-col h-full" data-clickable="Tool:6068:square-card"
            href="https://eliteai.tools/tool/roojoom">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/roojoom/screenshot-large.webp" alt="Roojoom" loading="lazy"
                decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-6068" class="font-semibold ">
                  Roojoom
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">AI-based Journey Orchestration
                  Platform</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                Roojoom is an AI-powered platform that orchestrates personalized customer journeys across multiple
                channels to optimize business goals and customer experiences. It offers automated journey optimization
                without coding requirements.
              </p>

<a class="flex flex-col h-full" data-clickable="Tool:6067:square-card"
            href="https://eliteai.tools/tool/datavisor">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/datavisor/screenshot-large.webp" alt="DataVisor" loading="lazy"
                decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-6067" class="font-semibold ">
                  DataVisor
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Modernize Your Fraud Defense with
                  AI-Powered Risk Management</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                DataVisor is an end-to-end fraud and risk SaaS platform powered by AI and advanced machine learning,
                designed for financial institutions to combat various types of fraud and financial crimes in
                real-time.
              </p>

<a class="flex flex-col h-full" data-clickable="Tool:6065:square-card"
            href="https://eliteai.tools/tool/the-octagon-oracle">
            <div class="relative w-full overflow-hidden rounded-t aspect-video">
              <img class="object-cover w-full h-full" height="720" width="1280"
                src="https://eliteai.tools/storage/tools/the-octagon-oracle/screenshot-large.webp"
                alt="The Octagon Oracle" loading="lazy" decoding="async">
              <div class="absolute bottom-0 left-0 right-0 px-4 pt-2 bg-white">
                <p id="tool-name-6065" class="font-semibold ">
                  The Octagon Oracle
                </p>
                <p class="font-medium text-gray-800 drop-shadow-sm line-clamp-1">Outsmart the odds with
                  algorithm-powered UFC betting predictions</p>
              </div>
            </div>

<div class="flex flex-col flex-grow gap-2 px-4">
              <p class="pt-1 text-gray-700 line-clamp-2">
                An AI-powered UFC betting prediction platform that uses advanced algorithms to project fight outcomes
                and distance projections, helping bettors make more informed decisions with up to 82% accuracy on top
                picks.
              </p>

</ul>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

// Set default active tab
    tabHeaders[0].classList.add('active', 'text-primary-600', 'border-primary-600');
    tabPanes[0].classList.remove('hidden');

tabHeaders.forEach(header => {
        header.addEventListener('click', () => {
            // Remove active class from all headers and panes
            tabHeaders.forEach(h => h.classList.remove('active', 'text-primary-600',
                'border-primary-600'));
            tabPanes.forEach(pane => pane.classList.add('hidden'));

// Add active class to the clicked header and corresponding pane
            header.classList.add('active', 'text-primary-600', 'border-primary-600');
            const targetTab = document.getElementById(header.getAttribute('data-tab'));
            targetTab.classList.remove('hidden');
        });
    });
});
</script>

Related Examples

Tabs section

Simon Scheffer

3 years ago

14.7k
cards
cards with background animation

Anonymous

3 years ago

12.6k
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

2k
Tab navigation with alpine JS

Mr Robot

4 years ago

18k
Tab Switch
tab-switching example with tailwind and vanilla JS

Prajwal Hallale

3 years ago

7.9k
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
cards
cards with background animation

Anonymous

2 years ago

3.8k
Working tabs switch

Fagundo67

3 years ago

15.7k
Basic Tabs
Trying to simplify tabs while making them accessible and responsive.

Sherry Lynne

1 month ago

249
Switch tabs button

gmer33

3 years ago

17.2k
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

4 months ago

475
Icon group

Conan Hilton

3 years ago

10.3k