Home
EliteAI Tools
Tab section

Tab section

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

Tabs

Author EliteAI Tools

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