Search Components

Tabs

Switch between different content within the same area

Tabs Component - Job/Career

A responsive tabs component with a Material Design aesthetic and pastel color scheme, suitable for job boards or career platforms. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 shadow-lg rounded-xl overflow-hidden">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <nav class="-mb-px flex space-x-0 sm:space-x-4 md:space-x-6 text-sm sm:text-base md:text-lg" aria-label="Tabs">
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 font-medium text-purple-600 dark:text-purple-400 border-purple-500 dark:border-purple-400 whitespace-nowrap hover:text-purple-700 dark:hover:text-purple-300 transition duration-200 ease-in-out" aria-current="page">
          <span class="block">Available Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Applied Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Saved Jobs</span>
        </a>
        <a href="#" class="flex-1 sm:flex-none py-4 px-1 sm:px-4 text-center border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-300 transition duration-200 ease-in-out whitespace-nowrap">
          <span class="block">Interviews</span>
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-6">Available Job Listings</h2>
      <div class="grid gap-6">

        <!-- Job Card 1 -->
        <div class="bg-violet-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-violet-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-violet-800 dark:text-violet-300">Senior Frontend Developer</h3>
              <p class="text-gray-600 dark:text-gray-400">Acme Corporation - San Francisco, CA</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Full-time, Remote-friendly</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-100">
                New
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$120k - $150k</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">We are looking for a highly skilled Senior Frontend Developer to join our dynamic team. You will be responsible for building cutting-edge web applications using modern JavaScript frameworks...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">React</span>
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">TypeScript</span>
            <span class="px-3 py-1 bg-violet-200 dark:bg-violet-700 text-violet-800 dark:text-violet-100 text-xs font-medium rounded-full">Tailwind CSS</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

        <!-- Job Card 2 -->
        <div class="bg-blue-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-blue-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-300">Product Manager, AI/ML</h3>
              <p class="text-gray-600 dark:text-gray-400">GlobalTech Inc. - Seattle, WA</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Full-time</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-yellow-100 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-100">
                Hot
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$130k - $170k</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">Seeking an experienced Product Manager with a strong background in AI/ML to lead our next-generation product initiatives. You will work closely with engineering, design, and research teams...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Product Management</span>
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Artificial Intelligence</span>
            <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-xs font-medium rounded-full">Machine Learning</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

        <!-- Job Card 3 -->
        <div class="bg-pink-50 dark:bg-gray-800 p-5 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out border border-pink-100 dark:border-gray-700">
          <div class="flex items-start justify-between flex-wrap gap-y-2 sm:gap-y-0">
            <div>
              <h3 class="text-xl font-semibold text-pink-800 dark:text-pink-300">UI/UX Designer</h3>
              <p class="text-gray-600 dark:text-gray-400">Creative Solutions - New York, NY</p>
              <p class="text-gray-500 dark:text-gray-500 text-sm mt-1">Contract, On-site</p>
            </div>
            <div class="text-right">
              <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100">
                Urgent
              </span>
              <p class="text-gray-700 dark:text-gray-300 text-lg font-bold mt-1">$70/hr - $90/hr</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mt-4 line-clamp-3">Join our team as a UI/UX Designer to craft intuitive and beautiful user experiences. You will be responsible for the full design process from wireframing to high-fidelity prototypes...</p>
          <div class="flex flex-wrap gap-2 mt-4">
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">Figma</span>
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">User Research</span>
            <span class="px-3 py-1 bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-pink-100 text-xs font-medium rounded-full">Prototyping</span>
          </div>
          <div class="mt-5 flex justify-end space-x-3">
            <button class="px-4 py-2 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
              Save
            </button>
            <button class="px-4 py-2 rounded-lg text-sm font-medium bg-purple-500 dark:bg-purple-600 text-white shadow-md hover:bg-purple-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-150 ease-in-out">
              Apply Now
            </button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

OrganicTabsComponent

A simple, responsive tabs component with an organic, nature-inspired design and a corporate blue color scheme, suitable for music/audio platforms. Includes dark mode support.

Open Preview

                <div class="p-4 md:p-8 dark:bg-gray-900 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-800 dark:to-gray-950 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <!-- Tabs Container -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden">
    <!-- Tabs Navigation -->
    <div class="flex border-b border-blue-200 dark:border-gray-700 bg-gradient-to-r from-blue-500 to-blue-600 dark:from-gray-700 dark:to-gray-800 p-1 md:p-2 rounded-t-3xl">
      <button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-semibold text-white focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 mr-1 md:mr-2 shadow-inner hover:bg-blue-700 dark:hover:bg-gray-900 bg-blue-600 dark:bg-gray-800 dark:text-white transform scale-105">
        Now Playing
      </button>
      <button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-medium text-blue-100 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 hover:bg-blue-500 dark:hover:bg-gray-750 hover:text-white">
        Queue
      </button>
      <button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-medium text-blue-100 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 ml-1 md:ml-2 hover:bg-blue-500 dark:hover:bg-gray-750 hover:text-white">
        More Tracks
      </button>
    </div>

    <!-- Tabs Content -->
    <div class="p-4 md:p-8 bg-white dark:bg-gray-850">
      <!-- Content for 'Now Playing' Tab -->
      <div>
        <h2 class="text-2xl md:text-3xl font-bold mb-4 dark:text-blue-300 text-blue-700">Currently Listening</h2>
        <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6">
          <div class="relative w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden shadow-lg border-4 border-blue-300 dark:border-gray-700 flex-shrink-0">
            <img src="https://picsum.photos/id/1040/400/400" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105 filter saturate-125 dark:saturate-100">
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-full flex items-end justify-center p-4">
              <button class="text-white bg-blue-600 dark:bg-gray-700 rounded-full p-3 shadow-lg hover:bg-blue-700 dark:hover:bg-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
              </button>
            </div>
          </div>
          <div class="text-center md:text-left">
            <p class="text-blue-500 dark:text-blue-400 text-lg font-semibold mb-1">Artist Name</p>
            <h3 class="text-3xl md:text-4xl font-extrabold leading-tight mb-2 dark:text-white text-gray-900">Song Title Goes Here</h3>
            <p class="text-gray-600 dark:text-gray-400 text-md md:text-lg">Album Name - Year</p>
            <div class="mt-4 flex items-center justify-center md:justify-start space-x-4">
              <button class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-full p-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.707 10.293a1 1 0 010-1.414L3.586 5.5a1 1 0 011.414 0l.707.707a1 1 0 010 1.414L3.414 9H15a1 1 0 010 2H3.414l2.293 2.293a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0L.707 10.293z" clip-rule="evenodd"></path></svg>
              </button>
              <button class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-full p-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.293 9.707a1 1 0 010 1.414L13.414 14.5a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414L16.586 11H5a1 1 0 010-2h11.586l-2.293-2.293a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l2.828 2.828z" clip-rule="evenodd"></path></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ArtDecoTabsComponent

A complex, responsive tabs component with an Art Deco aesthetic, designed for photography portfolios, featuring corporate blue tones and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 md:p-8 lg:p-12">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-2xl overflow-hidden rounded-lg border-4 border-blue-800 dark:border-blue-500 transform skew-y-1 md:skew-y-0 duration-300 ease-in-out">
    <div class="p-6 md:p-8 lg:p-10 bg-blue-900 dark:bg-blue-950 text-white transform -skew-y-1 md:skew-y-0">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-['Playfair_Display'] font-bold text-center tracking-wider uppercase text-blue-100 dark:text-blue-50 drop-shadow-lg leading-tight">
        <span class="block">The Lumina Gallery</span>
        <span class="block text-xl sm:text-2xl lg:text-3xl font-light italic mt-2">A Lens to the Soul</span>
      </h2>
      <p class="text-blue-200 dark:text-blue-100 text-center mt-4 max-w-2xl mx-auto text-sm sm:text-base md:text-lg opacity-90">
        Explore curated collections and captivating moments through our Art Deco inspired visual journey.
      </p>
    </div>

    <div class="flex flex-col md:flex-row flex-wrap justify-center bg-blue-800 dark:bg-blue-900 py-3 md:py-4 border-b-2 border-blue-600 dark:border-blue-700 relative z-10">
      <input type="radio" name="tabs" id="tab-all" class="hidden" checked>
      <label for="tab-all" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        All Galleries
      </label>
      <input type="radio" name="tabs" id="tab-portraits" class="hidden">
      <label for="tab-portraits" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        Portraits
      </label>
      <input type="radio" name="tabs" id="tab-landscapes" class="hidden">
      <label for="tab-landscapes" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        Landscapes
      </label>
      <input type="radio" name="tabs" id="tab-conceptual" class="hidden">
      <label for="tab-conceptual" class="tab-label text-blue-100 dark:text-blue-50 px-6 py-3 cursor-pointer text-base md:text-lg uppercase tracking-wide font-semibold transform hover:scale-105 duration-200 ease-in-out border-b-4 border-transparent hover:border-blue-300 dark:hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-300 transition-all">
        Conceptual
      </label>

      <style>
        .tab-label:has(~ input[type="radio"]:checked) {
          background: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: #1e3a8a var(--tw-gradient-from-position);
          --tw-gradient-to: #172554 var(--tw-gradient-to-position);
          color: #bfdbfe; /* blue-200 */
          border-color: #60a5fa; /* blue-400 */
          transform: translateY(-4px) scale(1.02); /* Slight lift */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
        .dark .tab-label:has(~ input[type="radio"]:checked) {
          background: linear-gradient(to bottom, var(--tw-gradient-stops));
          --tw-gradient-from: #0c0a09 var(--tw-gradient-from-position); /* stone-950 */
          --tw-gradient-to: #0f172a var(--tw-gradient-to-position); /* slate-900 */
          color: #bfdbfe; /* blue-200 */
          border-color: #60a5fa; /* blue-400 */
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        }
      </style>
    </div>

    <div class="tab-content px-4 py-8 md:px-8 md:py-10 bg-gray-50 dark:bg-gray-800 relative z-0">
      <div id="content-all" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">All Works Unified</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1018/600/400" alt="Forest Stream" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Whispers of the Wild</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Nature's symphony in a serene woodland setting.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1012/600/400" alt="Portrait of a woman" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Glimpse of Serenity</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">A captivating study of human emotion and light.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1043/600/400" alt="Geometric abstraction" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Abstract Reverie</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Lines and light weaving an intricate visual narrative.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1054/600/400" alt="City landscape at night" class="w-full h-48 object-cover object-bottom transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Urban Nocturne</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Vibrant cityscapes under the twilight's embrace.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>

      <div id="content-portraits" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Faces & Souls</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Portrait 1" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">The Gaze</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Deep connections through the eyes.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Portrait 2" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Reflections</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">A moment of quiet contemplation.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Portrait 3" class="w-full h-48 object-cover object-top transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Vivid Spirit</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Capturing the essence of a vibrant personality.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>

      <div id="content-landscapes" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Vistas & Horizons</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1069/600/400" alt="Mountain range" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Peaks of Tranquility</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Majestic mountains under a clear sky.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/1070/600/400" alt="Desert dunes" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Sand Dunes Echo</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Endless desert patterns carved by wind.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>

      <div id="content-conceptual" class="tab-pane grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 transition-opacity duration-500 ease-in-out opacity-0 absolute top-0 left-0 w-full p-4 md:p-8 lg:p-10 pointer-events-none">
        <h3 class="text-2xl font-bold mb-4 col-span-full text-blue-900 dark:text-blue-200 uppercase tracking-wide border-b-2 border-blue-400 pb-2">Mind & Metaphor</h3>
        
        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/292/600/400" alt="Abstract shapes" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Geometric Serenity</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">The elegance of form and structure.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg transform hover:scale-102 duration-300 ease-in-out bg-white dark:bg-gray-700 border border-blue-200 dark:border-blue-700">
          <img src="https://picsum.photos/id/296/600/400" alt="Minimalist architecture" class="w-full h-48 object-cover object-center transition-transform duration-500 group-hover:scale-110 group-hover:rotate-1" loading="lazy">
          <div class="p-4 relative bg-gradient-to-t from-gray-50 dark:from-gray-700 via-gray-50/80 dark:via-gray-700/80 to-transparent pt-12 -mt-12 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <h4 class="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-1">Silent Structures</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300">Architectural forms speaking volumes in silence.</p>
            <a href="#" class="absolute top-2 right-2 text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.querySelectorAll('input[name="tabs"]').forEach(input => {
    input.addEventListener('change', (e) => {
      const targetId = `content-${e.target.id.split('-')[1]}`;
      document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.add('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
        pane.classList.remove('relative', 'opacity-100');
      });
      const activePane = document.getElementById(targetId);
      if (activePane) {
        activePane.classList.remove('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
        activePane.classList.add('relative', 'opacity-100');
      }
    });
  });

  // Initial load to show the first tab
  document.querySelector('#tab-all').checked = true;
  document.getElementById('content-all').classList.remove('opacity-0', 'absolute', 'top-0', 'left-0', 'w-full', 'p-4', 'md:p-8', 'lg:p-10', 'pointer-events-none');
  document.getElementById('content-all').classList.add('relative', 'opacity-100');
</script>

Luxury Tabs Component

A simple, elegant tabs component designed for consulting or services websites, featuring jewel tones and full responsiveness with dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
    <!-- Tabs Navigation -->
    <div class="flex-none w-full md:w-56 bg-emerald-700 dark:bg-emerald-900 rounded-lg p-2 shadow-inner">
      <nav class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-2" role="tablist">
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="true"
          data-state="active"
          tabindex="0"
          id="tab-1"
          aria-controls="panel-1"
        >
          Strategic Planning
        </button>
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="false"
          data-state="inactive"
          tabindex="-1"
          id="tab-2"
          aria-controls="panel-2"
        >
          Market Analysis
        </button>
        <button
          class="flex-1 md:flex-none py-3 px-4 text-sm font-semibold rounded-md text-emerald-100 hover:bg-emerald-600 dark:hover:bg-emerald-800 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:focus:ring-emerald-700 data-[state=active]:bg-emerald-900 dark:data-[state=active]:bg-emerald-700 data-[state=active]:text-white"
          role="tab"
          aria-selected="false"
          data-state="inactive"
          tabindex="-1"
          id="tab-3"
          aria-controls="panel-3"
        >
          Financial Advisory
        </button>
      </nav>
    </div>

    <!-- Tabs Content -->
    <div class="flex-auto bg-gray-50 dark:bg-gray-800 rounded-lg p-6 shadow-md text-gray-800 dark:text-gray-200">
      <div
        role="tabpanel"
        id="panel-1"
        aria-labelledby="tab-1"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden"
        data-state="active"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">Strategic Planning Excellence</h3>
        <p class="text-lg leading-relaxed">
          Our expert consultants work closely with your leadership to develop robust, forward-thinking strategies that propel your organization toward its long-term goals. We combine in-depth analysis with actionable insights to create a roadmap for sustainable growth and competitive advantage.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Vision & Mission Alignment</li>
          <li>Goal Setting & KPI Development</li>
          <li>Resource Allocation Optimization</li>
          <li>Risk Assessment & Mitigation</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=1" alt="Strategic Planning Meeting" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>

      <div
        role="tabpanel"
        id="panel-2"
        aria-labelledby="tab-2"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden hidden"
        data-state="inactive"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">In-Depth Market Analysis</h3>
        <p class="text-lg leading-relaxed">
          Gain a comprehensive understanding of your market landscape, customer behaviors, and competitor strategies. Our detailed market analysis provides the intelligence you need to identify new opportunities, mitigate threats, and make informed business decisions.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Competitor Benchmarking</li>
          <li>Customer Segmentation & Insights</li>
          <li>Industry Trend Forecasting</li>
          <li>SWOT Analysis</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=2" alt="Market Analysis Charts" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>

      <div
        role="tabpanel"
        id="panel-3"
        aria-labelledby="tab-3"
        tabindex="0"
        class="space-y-4 data-[state=active]:block data-[state=inactive]:hidden hidden"
        data-state="inactive"
      >
        <h3 class="text-2xl font-bold text-sapphire-800 dark:text-sapphire-300">Robust Financial Advisory</h3>
        <p class="text-lg leading-relaxed">
          Secure your financial future with our expert advisory services. From capital management to investment strategies and risk management, we provide tailored financial guidance designed to optimize your financial health and achieve your fiscal objectives.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Investment Strategy Development</li>
          <li>Capital Structure Optimization</li>
          <li>Mergers & Acquisitions Support</li>
          <li>Due Diligence & Valuation</li>
        </ul>
        <img src="https://picsum.photos/600/350?random=3" alt="Financial Advisory Chart" class="mt-4 rounded-lg shadow-lg w-full object-cover" loading="lazy">
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabs = document.querySelectorAll('[role="tab"]');
    const tabPanels = document.querySelectorAll('[role="tabpanel"]');

    tabs.forEach(tab => {
      tab.addEventListener('click', (e) => {
        const targetId = e.currentTarget.id;
        const targetPanelId = e.currentTarget.getAttribute('aria-controls');

        // Deactivate all tabs and hide all panels
        tabs.forEach(t => {
          t.setAttribute('aria-selected', 'false');
          t.setAttribute('tabindex', '-1');
          t.dataset.state = 'inactive';
        });
        tabPanels.forEach(p => {
          p.dataset.state = 'inactive';
          p.classList.add('hidden');
        });

        // Activate the clicked tab and show its panel
        e.currentTarget.setAttribute('aria-selected', 'true');
        e.currentTarget.setAttribute('tabindex', '0');
        e.currentTarget.dataset.state = 'active';
        document.getElementById(targetPanelId).dataset.state = 'active';
        document.getElementById(targetPanelId).classList.remove('hidden');
      });
    });
  });
</script>

Luxury_Tabs_Component

A simple, elegant, and responsive tabs component designed for marketplace use, featuring a luxury/premium aesthetic with a complementary color scheme and dark mode support.

Open Preview

                <div class="p-4 dark:bg-gray-900 bg-white min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700 p-2">
      <button class="flex-1 px-4 py-3 text-lg font-medium text-purple-700 dark:text-purple-400 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none">
        <span class="block">New Arrivals</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">Best Sellers</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">On Sale</span>
      </button>
    </div>

    <div class="p-6 md:p-8">
      <!-- Tab Content 1: New Arrivals -->
      <div class="space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Discover Our Latest Collection</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Explore hand-picked items from top sellers, meticulously selected for their quality and unique appeal. Elevate your style with our exquisite new arrivals.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Elegant Leather Bag</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$299.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Handcrafted with premium leather.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Artisan Silver Necklace</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$149.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Unique design, pure sterling silver.</p>
            </div>
          </div>
        </div>
        <div class="md:flex items-center justify-between py-4 border-t border-gray-200 dark:border-gray-700 mt-6">
            <div class="flex -space-x-2 overflow-hidden mb-4 md:mb-0 justify-center md:justify-start">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 text-center md:text-right">Trusted by over 10,000 discerning customers.</p>
        </div>
      </div>

      <!-- Tab Content 2: Best Sellers (hidden by default, for demonstration) -->
      <!-- Add 'hidden' class to hide, remove to show -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Our Most Popular Choices</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          See what everyone else is loving! These items consistently receive top ratings and fly off our shelves. Don't miss out on these customer favorites.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Swiss Watch</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$899.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Timeless elegance, precise mechanics.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Silk Scarf Collection</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$75.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Luxurious feel, vibrant patterns.</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Tab Content 3: On Sale (hidden by default, for demonstration) -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Limited-Time Offers</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Grab these incredible deals before they're gone! Premium items at unbeatable prices, available for a short period only.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Designer Handbag</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$450.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$225.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">50% off! Limited stock.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Luxury Scented Candle Set</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$90.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$60.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">30% off! Perfect gift.</p>
            </div>
          </div>
        </div>
      </div> -->

    </div>
  </div>
</div>

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

A simple, responsive tabs component with an industrial, monochromatic aesthetic, designed for booking and reservation systems. It supports dark mode and uses raw materials and exposed elements for utilitarian appeal.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen flex items-start justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
      <input type="radio" name="tab" id="tab1" class="hidden" checked>
      <label for="tab1" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Appointment
      </label>
      <input type="radio" name="tab" id="tab2" class="hidden">
      <label for="tab2" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none border-r border-gray-200 dark:border-gray-700 transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        Reservation
      </label>
      <input type="radio" name="tab" id="tab3" class="hidden">
      <label for="tab3" class="flex-1 text-center py-4 px-6 text-sm sm:text-base font-semibold uppercase tracking-wide cursor-pointer select-none transition-colors duration-200 
                    text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 
                    peer-checked:text-gray-900 peer-checked:dark:text-white peer-checked:bg-gray-200 peer-checked:dark:bg-gray-900 peer-checked:border-b-2 peer-checked:border-gray-900 peer-checked:dark:border-gray-100 peer-active:outline-none focus:outline-none">
        History
      </label>
    </div>

    <div class="p-6 sm:p-8">
      <!-- Tab Content 1: Appointment -->
      <div id="content1" class="tab-content" data-tab="tab1">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Schedule Your Appointment</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Please select a service, date, and time for your appointment. Our team will confirm your booking within 24 hours.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Service Type</label>
            <select id="service" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Service</option>
              <option value="consultation">Technical Consultation</option>
              <option value="maintenance">Equipment Maintenance</option>
              <option value="installation">New System Installation</option>
              <option value="repair">Emergency Repair</option>
            </select>
          </div>
          <div>
            <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Date</label>
            <input type="date" id="date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="time" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Preferred Time Slot</label>
            <input type="time" id="time" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (Optional)</label>
            <textarea id="notes" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Book Appointment</button>
      </div>

      <!-- Tab Content 2: Reservation -->
      <div id="content2" class="tab-content hidden" data-tab="tab2">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Make a Resource Reservation</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Reserve our specialized equipment or facilities. Provide details about your project to ensure availability and suitability.</p>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label for="resource" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Resource Type</label>
            <select id="resource" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
              <option value="">Select a Resource</option>
              <option value="lab">Testing Lab Area</option>
              <option value="equipment">Heavy Lifting Equipment</option>
              <option value="conference">Conference Room 1</option>
              <option value="workshop">Large Workshop Space</option>
            </select>
          </div>
          <div>
            <label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Start Date</label>
            <input type="date" id="start-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">End Date</label>
            <input type="date" id="end-date" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none">
          </div>
          <div>
            <label for="project-details" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Project Details</label>
            <textarea id="project-details" rows="3" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-gray-500 focus:border-gray-500 outline-none resize-y"></textarea>
          </div>
        </div>
        <button class="mt-8 w-full py-3 px-6 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-semibold rounded-md shadow-md hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">Submit Reservation</button>
      </div>

      <!-- Tab Content 3: History -->
      <div id="content3" class="tab-content hidden" data-tab="tab3">
        <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Your Booking History</h2>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Review your past appointments and reservations. You can also cancel or reschedule upcoming bookings here.</p>
        
        <div class="space-y-4">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Equipment Maintenance</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-10-26, Time: 10:00 AM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-green-600 dark:text-green-400 font-medium">Confirmed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
              <button class="px-4 py-2 text-sm bg-red-600 text-white rounded-md hover:bg-red-700 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">Cancel</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Testing Lab Area Reservation</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">From: 2023-10-20 to 2023-10-22</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-blue-600 dark:text-blue-400 font-medium">Completed</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md border border-gray-200 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">Emergency Repair Service</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Date: 2023-09-15, Time: 02:30 PM</p>
              <p class="text-sm text-gray-600 dark:text-gray-300">Status: <span class="text-red-600 dark:text-red-400 font-medium">Cancelled</span></p>
            </div>
            <div class="mt-3 sm:mt-0 flex space-x-2">
              <button class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Details</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is a workaround for pure HTML/CSS tab functionality using radio buttons */
  /* In a real application, JavaScript would be used for better accessibility and dynamic content */
  .tab-content {
    display: none;
  }
  
  #tab1:checked ~ .flex + .p-6 #content1,
  #tab2:checked ~ .flex + .p-6 #content2,
  #tab3:checked ~ .flex + .p-6 #content3 {
    display: block;
  }

  /* Styles for the labels to act as interactive tabs */
  #tab1:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important; /* gray-200 */
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important; /* gray-900 */
    color: var(--checked-text-color-light, #1f2937) !important; /* gray-900 */
  }
  .dark #tab1:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important; /* gray-900 */
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important; /* gray-100 */
    color: var(--checked-text-color-dark, #f9fafb) !important; /* white */
  }

  #tab2:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab2:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }

  #tab3:checked + label {
    background-color: var(--checked-bg-color-light, #e5e7eb) !important;
    border-bottom: 2px solid var(--checked-border-color-light, #1f2937) !important;
    color: var(--checked-text-color-light, #1f2937) !important;
  }
  .dark #tab3:checked + label {
    background-color: var(--checked-bg-color-dark, #111827) !important;
    border-bottom: 2px solid var(--checked-border-color-dark, #f9fafb) !important;
    color: var(--checked-text-color-dark, #f9fafb) !important;
  }
</style>

Manufacturing_Industrial_Grayscale_Paper_Tabs

A simple, responsive tabs component with a paper/print-inspired design and grayscale color scheme, suitable for manufacturing and industrial applications. Includes dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200 min-h-screen">

  <div class="max-w-4xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 pt-4 sm:px-6 sm:pt-6 md:px-8 md:pt-8">
      <nav class="-mb-px flex space-x-4 sm:space-x-6 md:space-x-8 overflow-x-auto pb-4 custom-scrollbar" aria-label="Tabs">
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800" aria-current="page">
          Production Overview
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-700 border-gray-500 dark:text-gray-200 dark:border-gray-400 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Inventory Status
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Quality Control
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Maintenance Logs
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 dark:text-gray-100">Inventory Status</h2>
      <div class="prose prose-sm sm:prose dark:prose-invert max-w-none">
        <p class="mb-4 text-gray-700 dark:text-gray-300">Current stock levels and replenishment forecasts are critical for uninterrupted manufacturing processes. Below is a summary of key components and finished goods in our warehouses.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Raw Materials</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Steel Coils: <span class="font-bold">1200 tons</span> (Capacity: 1500 tons)</li>
                <li>Aluminum Sheets: <span class="font-bold">850 units</span> (Capacity: 1000 units)</li>
                <li>Circuit Boards: <span class="font-bold">3500 units</span> (Capacity: 4000 units)</li>
            </ul>
          </div>
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Finished Products</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Industrial Pumps (Model X): <span class="font-bold">45 units</span> (Order: 50)</li>
                <li>Precision Robotics (Series Y): <span class="font-bold">18 units</span> (Order: 20)</li>
                <li>Heavy Duty Connectors: <span class="font-bold">980 units</span> (Order: 1000)</li>
            </ul>
          </div>
        </div>

        <figure class="mt-6 mb-4">
          <img src="https://picsum.photos/800/450?random=10" alt="Industrial inventory warehouse" class="w-full h-auto rounded-lg shadow-md border border-gray-200 dark:border-gray-700 object-cover">
          <figcaption class="text-sm text-gray-500 mt-2 text-center dark:text-gray-400">Visual representation of current inventory levels in automated warehouse system.</figcaption>
        </figure>

        <h3 class="text-lg sm:text-xl font-semibold mt-6 mb-2 dark:text-gray-100">Next Delivery Schedule</h3>
        <ul class="list-disc list-inside space-y-1 text-gray-700 dark:text-gray-300">
          <li>Steel Coils: <span class="font-semibold">Expected Oct 25, 2023</span> from Supplier A (PO# 12345)</li>
          <li>Circuit Boards: <span class="font-semibold">Expected Oct 28, 2023</span> from Supplier B (PO# 67890)</li>
          <li>Packaging Material: <span class="font-semibold">Expected Nov 01, 2023</span> from Supplier C (PO# 54321)</li>
        </ul>

      </div>
    </div>

  </div>

  <style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #e0e0e0; /* Light gray for scrollbar track */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a4a4a; /* Darker gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #a0a0a0; /* Medium gray for scrollbar thumb */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6b6b6b; /* Slightly lighter gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #888; /* Darker gray on hover */
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #808080;
  }
  </style>
</div>

IndustrialVibrantTabs

A complex, vibrant, industrial-themed tabs component suitable for a multi-vendor marketplace, featuring exposed elements, raw material aesthetics, and high-saturation colors. Fully responsive with dark mode support.

Open Preview

                <div class="relative bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 lg:p-12 font-sans overflow-hidden">

  <!-- Background Grids/Patterns for Industrial Feel -->
  <div class="absolute inset-0 z-0 overflow-hidden opacity-5 dark:opacity-10">
    <div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob dark:from-sky-700 dark:to-blue-900"></div>
    <div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000 dark:from-fuchsia-700 dark:to-pink-900"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1/4 h-1/4 bg-gradient-to-br from-orange-400 to-red-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000 dark:from-amber-600 dark:to-red-800"></div>
  </div>
  <div class="absolute inset-0 z-0 pointer-events-none opacity-5 dark:opacity-10">
    <svg class="absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="grid-pattern" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 L 0 40" fill="none" stroke="#a0a0a0" stroke-width="0.5" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#grid-pattern)" />
    </svg>
  </div>
  <!-- End Background -->

  <div class="relative z-10 max-w-7xl mx-auto bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">

    <!-- Component Header -->
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 sm:mb-6 leading-tight tracking-tight drop-shadow-lg">
      <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-cyan-400 dark:to-fuchsia-500">Marketplace Insights</span>
      <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 mt-2 sm:mt-4">Manage your vendor activities and product listings.</span>
    </h2>

    <!-- Tabs Navigation -->
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mb-6 sm:mb-8 border-b-2 border-dashed border-gray-300 dark:border-gray-700 pb-4 overflow-x-auto scrollbar-hidden">

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-bold transition-all duration-300 ease-in-out
                     bg-blue-600 text-white shadow-lg shadow-blue-500/50 dark:bg-sky-500 dark:shadow-sky-500/50
                     hover:bg-blue-700 dark:hover:bg-sky-600 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-300
                     border-2 border-blue-700 dark:border-sky-600 whitespace-nowrap">
        <i class="fas fa-boxes mr-2"></i> Product Catalog
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-shipping-fast mr-2"></i> Order Management
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-chart-line mr-2"></i> Sales Analytics
      </button>

      <button class="flex-shrink-0 px-5 py-3 rounded-xl text-lg font-medium transition-all duration-300 ease-in-out
                     text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700
                     hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600
                     border-2 border-gray-300 dark:border-gray-600 whitespace-nowrap">
        <i class="fas fa-user-friends mr-2"></i> Vendor Network
      </button>

    </div>

    <!-- Tabs Content (Active Tab: Product Catalog) -->
    <div>
      <!-- Product Catalog Tab Content -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

        <!-- Product Card 1 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-red-500 dark:border-t-rose-600 rounded-lg shadow-md p-5 pb- lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-red-500 dark:bg-rose-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">HOT</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/1018/80/80" alt="Product 1" class="w-20 h-20 object-cover rounded-md border-2 border-red-400 dark:border-rose-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Heavy Duty Wrench Set</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: HDWS-V001</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-blue-600 dark:text-sky-400 font-semibold">ToolCrafters Inc.</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$129.99</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4.5/5)</span></p>
            </div>
            <button class="w-full bg-red-600 dark:bg-rose-700 text-white py-2 rounded-lg font-semibold hover:bg-red-700 dark:hover:bg-rose-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-rose-500 border-b-4 border-red-800 dark:border-rose-900 shadow-md">
              <i class="fas fa-eye mr-2"></i> View Details
            </button>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-blue-500 dark:border-t-sky-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-blue-500 dark:bg-sky-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">SALE</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/201/80/80" alt="Product 2" class="w-20 h-20 object-cover rounded-md border-2 border-blue-400 dark:border-sky-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Automated Robotic Arm</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: ARA-ELT005</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-purple-600 dark:text-fuchsia-400 font-semibold">MechWorks Global</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$2,499.00</span> <span class="text-gray-500 line-through ml-2">$2,999.00</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(4/5)</span></p>
            </div>
            <button class="w-full bg-blue-600 dark:bg-sky-700 text-white py-2 rounded-lg font-semibold hover:bg-blue-700 dark:hover:bg-sky-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-blue-400 dark:focus:ring-sky-500 border-b-4 border-blue-800 dark:border-sky-900 shadow-md">
              <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
            </button>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white dark:bg-gray-900 border border-t-4 border-l-4 border-gray-200 dark:border-gray-700 border-t-green-500 dark:border-t-emerald-600 rounded-lg shadow-md p-5 lg:p-6 relative overflow-hidden group">
          <div class="absolute -top-3 -right-3 w-16 h-16 bg-green-500 dark:bg-emerald-600 transform rotate-45 group-hover:scale-110 transition-transform duration-300 ease-out"></div>
          <p class="absolute top-2 right-2 text-white text-xs font-bold transform rotate-45 z-10">NEW</p>

            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/id/237/80/80" alt="Product 3" class="w-20 h-20 object-cover rounded-md border-2 border-green-400 dark:border-emerald-500 mr-4 shadow-sm">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">High-Precision Lathe Machine</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400">SKU: HPLM-XYZ007</p>
                </div>
            </div>
            <div class="text-gray-700 dark:text-gray-300 text-sm mb-4">
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Vendor:</strong> <span class="text-orange-600 dark:text-amber-400 font-semibold">Precision Tools Co.</span></p>
                <p class="mb-2"><strong class="text-gray-900 dark:text-white">Price:</strong> <span class="text-green-600 dark:text-green-400 font-bold text-lg">$8,750.00</span></p>
                <p class="flex items-center text-yellow-500"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">(5/5)</span></p>
            </div>
            <button class="w-full bg-green-600 dark:bg-emerald-700 text-white py-2 rounded-lg font-semibold hover:bg-green-700 dark:hover:bg-emerald-800 transition-colors duration-300 focus:outline-none focus:ring-4 focus:ring-green-400 dark:focus:ring-emerald-500 border-b-4 border-green-800 dark:border-emerald-900 shadow-md">
              <i class="fas fa-arrow-alt-circle-right mr-2"></i> Learn More
            </button>
        </div>

      </div>

      <!-- Call to Action below cards -->
      <div class="text-center mt-8 sm:mt-12">
        <button class="px-8 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-full shadow-lg shadow-purple-500/50 dark:from-fuchsia-600 dark:to-rose-700 dark:shadow-fuchsia-500/50
                       hover:from-purple-700 hover:to-pink-700 dark:hover:from-fuchsia-700 dark:hover:to-rose-800 transition-all duration-300 ease-in-out
                       focus:outline-none focus:ring-4 focus:ring-purple-400 dark:focus:ring-fuchsia-300 border-2 border-purple-800 dark:border-fuchsia-900 animate-pulse">
          <i class="fas fa-plus-circle mr-2"></i> Explore All 10,000+ Products
        </button>
      </div>


    </div>

  </div>

  <!-- Add Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0V4LLanw2qksTZI9xQpQAcSNasj+pXVjrSPmGz0Y15e7p/f0+asX5RFA5Bw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- Tailwind JIT classes for animations and dark mode (if not configured globally) -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }
    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.3, 0.9);
    }
    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }
    .scrollbar-hidden::-webkit-scrollbar {
      display: none;
    }
    .scrollbar-hidden {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
  </style>


</div>

Art Deco News Tabs Component

A complex, responsive, and luxurious 'Art Deco' style tabs component designed for news and journalism websites, featuring geometric patterns, rich analogous colors, and dark mode support. It provides multiple interactive elements for content navigation.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 md:p-12 transition-colors duration-300">
  <div class="max-w-7xl mx-auto bg-amber-100 dark:bg-zinc-800 shadow-xl rounded-lg overflow-hidden border-2 border-amber-300 dark:border-zinc-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border"></div>
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-amber-400 to-yellow-600 dark:from-sky-700 dark:to-cyan-900 clip-path-polygon-border-inverted"></div>

    <!-- Main Content Area -->
    <div class="p-6 md:p-10 lg:p-12 relative z-10">
      <h2 class="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 md:mb-12 text-zinc-800 dark:text-amber-50 drop-shadow-lg font-serif tracking-wide leading-tight">
        <span class="block">The Daily Dispatch</span>
        <span class="block text-2xl sm:text-3xl md:text-4xl text-amber-600 dark:text-sky-500 mt-2 font-normal">Global News at Your Fingertips</span>
      </h2>

      <!-- Tabs Navigation -->
      <div class="flex flex-wrap justify-center mb-8 border-b-4 border-amber-300 dark:border-zinc-700 bg-amber-200 dark:bg-zinc-700 rounded-t-lg shadow-inner">
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 first:rounded-tl-lg last:rounded-tr-lg active-tab transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Headlines</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">World</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Business</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Tech</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
        <button class="py-4 px-4 sm:px-6 md:px-8 text-xl sm:text-2xl font-bold text-amber-800 dark:text-sky-200 hover:bg-amber-300 dark:hover:bg-zinc-600 border-x border-amber-300 dark:border-zinc-700 transition-all duration-300 ease-in-out relative group overflow-hidden">
          <span class="relative z-10">Culture</span>
          <span class="absolute inset-0 bg-yellow-500 dark:bg-cyan-700 transform -translate-x-full group-[.active-tab]:translate-x-0 transition-transform duration-500 ease-out z-0 opacity-30"></span>
        </button>
      </div>

      <!-- Tab Content Area -->
      <div class="tab-content bg-amber-50 dark:bg-zinc-900 p-6 md:p-8 lg:p-10 rounded-b-lg border-2 border-amber-300 dark:border-zinc-700 shadow-lg">
        <!-- Headline Tab Content -->
        <div class="tab-pane active-pane">
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- News Card 1 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=1" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Revolutionary AI Breakthrough Achieves Human-Level Cognition</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Scientists at the Silicon Valley Institute announce a groundbreaking development in artificial intelligence, achieving unprecedented cognitive capabilities...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Technology</span>
                  <span>2 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 2 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=2" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Global Leaders Convene for Climate Emergency Summit</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Delegates from over 150 nations have gathered in Geneva to address the escalating climate crisis, proposing bold new targets and initiatives...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">World Affairs</span>
                  <span>5 hours ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 3 -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden border-2 border-amber-200 dark:border-zinc-700 group relative">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=3" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Art Market Boom: Rare Masterpiece Fetches Record Price</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">A previously unseen painting by a renowned Post-Impressionist artist sold for an astounding sum at Sotheby's, signaling a robust fine art market...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Culture</span>
                  <span>1 day ago</span>
                </div>
              </div>
            </article>

            <!-- News Card 4 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden md:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=4" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">New Economic Policies Aim to Boost Small Businesses</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Government unveils a comprehensive stimulus package, including tax breaks and grants, designed to support and foster growth among small and medium enterprises...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Business & Finance</span>
                  <span>Yesterday</span>
                </div>
              </div>
            </article>

            <!-- News Card 5 (Hidden on small screens) -->
            <article class="bg-amber-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden md:col-span-2 lg:col-span-1 border-2 border-amber-200 dark:border-zinc-700 group relative hidden lg:block">
              <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/20 to-amber-500/20 dark:from-sky-700/20 dark:to-cyan-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
              <img src="https://picsum.photos/600/400?random=5" alt="News Image" class="w-full h-48 object-cover rounded-t-lg border-b-2 border-amber-200 dark:border-zinc-700">
              <div class="p-5">
                <h3 class="text-2xl font-bold text-zinc-900 dark:text-amber-50 mb-3 leading-tight font-serif">
                  <a href="#" class="hover:text-amber-700 dark:hover:text-sky-400 transition-colors duration-200">Exploration Mission Discovers Ancient Underwater City</a>
                </h3>
                <p class="text-zinc-700 dark:text-zinc-300 mb-4 line-clamp-3">Deep-sea archaeologists have uncovered ruins of a vast civilization beneath the Pacific, rewriting history and sparking new theories...</p>
                <div class="flex items-center justify-between text-sm text-zinc-600 dark:text-zinc-400">
                  <span class="font-medium">Science & Discovery</span>
                  <span>2 days ago</span>
                </div>
              </div>
            </article>

             <!-- Large News Card (Featured Headline - visible on all screens) -->
             <article class="col-span-1 md:col-span-2 lg:col-span-3 bg-amber-200 dark:bg-zinc-700 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border-4 border-amber-400 dark:border-sky-600 group relative flex flex-col md:flex-row">
                <div class="absolute inset-0 bg-gradient-to-br from-gold-500/30 to-yellow-700/30 dark:from-cyan-600/30 dark:to-blue-800/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-lg"></div>
                <img src="https://picsum.photos/800/600?random=6" alt="Feature News Image" class="w-full md:w-1/2 h-64 md:h-auto object-cover rounded-t-lg md:rounded-l-lg md:rounded-tr-none border-b-4 md:border-r-4 border-amber-400 dark:border-sky-600">
                <div class="p-6 md:p-8 lg:p-10 flex flex-col justify-center w-full md:w-1/2">
                  <h3 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-zinc-900 dark:text-amber-50 mb-4 leading-tight font-serif drop-shadow-md">
                    <a href="#" class="hover:text-amber-800 dark:hover:text-sky-300 transition-colors duration-200">Exclusive: Geopolitical Tensions Rise Amidst Unprecedented Diplomatic Shuffle</a>
                  </h3>
                  <p class="text-zinc-800 dark:text-zinc-100 text-lg mb-6 line-clamp-4 leading-relaxed">Our senior correspondents provide an in-depth analysis of the recent shifts in international relations, exploring the ripple effects across continents and the potential for a new global order. Exclusive insights from top diplomats and analysts reveal complex motivations and hidden agendas...</p>
                  <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between text-md text-amber-700 dark:text-sky-300 font-semibold">
                    <span class="mb-2 sm:mb-0">Featured Analysis</span>
                    <div class="flex items-center">
                      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-amber-400 dark:border-sky-600">
                      <span>By Dr. Alistair Finch • 3 hours ago</span>
                    </div>
                  </div>
                </div>
              </article>

          </div>
        </div>

        <!-- Other Tab Contents (Hidden by default, for demonstration) -->
        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'World News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">European Union Reforms</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New parliamentary decisions reshape the future of the European economy and social policies...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Middle East Peace Talks</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Renewed diplomatic efforts aim to broker a lasting peace agreement in the troubled region...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Business News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Stock Market Volatility</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Analysts warn of impending corrections amid global economic uncertainties...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Tech Giant Acquisitions</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Major players in the tech industry are consolidating their power through strategic buyouts...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Tech News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Quantum Computing Leaps</h3>
              <p class="text-zinc-700 dark:text-zinc-300">New advancements promise to revolutionize computation and data security...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">AI Ethics Debate</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Philosophers and engineers grapple with the moral implications of autonomous systems...</p>
            </article>
          </div>
        </div>

        <div class="tab-pane hidden">
          <p class="text-zinc-700 dark:text-zinc-300 text-lg md:text-xl font-serif text-center py-10">
            Content for 'Culture News' will appear here.
          </p>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Emerging Art Scenes</h3>
              <p class="text-zinc-700 dark:text-zinc-300">Underground art movements are gaining mainstream recognition in major cities...</p>
            </article>
            <article class="bg-amber-100 dark:bg-zinc-800 p-5 rounded-lg shadow-sm border border-amber-200 dark:border-zinc-700">
              <h3 class="text-xl font-bold text-zinc-900 dark:text-amber-50 mb-2">Literary Awards Season</h3>
              <p class="text-zinc-700 dark:text-zinc-300">The annual celebration of literary excellence unveils unexpected winners...</p>
            </article>
          </div>
        </div>

      </div>

      <div class="text-center mt-8 md:mt-12 text-zinc-600 dark:text-zinc-400 text-sm">
        <p>&copy; 2023 The Daily Dispatch. All rights reserved. Designed with Art Deco flair.</p>
      </div>
    </div>
  </div>
</div>

<!-- Custom Styles for Art Deco Geometric Patterns -->
<style>
  .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
  /* Dark mode specific adjustments for clip-path */
  .dark .clip-path-polygon-border {
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  }
  .dark .clip-path-polygon-border-inverted {
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
  }
</style>

<!-- Simple JS for tab functionality (as per instructions, only HTML and Tailwind, but functional tabs require JS) -->
<!-- For a real-world scenario, this JS would be external or inline if absolutely necessary. -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const tabButtons = document.querySelectorAll('.flex.flex-wrap button');
    const tabPanes = document.querySelectorAll('.tab-pane');

    tabButtons.forEach(button => {
      button.addEventListener('click', (event) => {
        // Remove active state from all buttons and panes
        tabButtons.forEach(btn => btn.classList.remove('active-tab'));
        tabPanes.forEach(pane => pane.classList.add('hidden'));

        // Add active state to the clicked button
        event.currentTarget.classList.add('active-tab');

        // Determine which tab content to show based on button index
        const index = Array.from(tabButtons).indexOf(event.currentTarget);
        if (tabPanes[index]) {
          tabPanes[index].classList.remove('hidden');
        }
      });
    });

    // Initialize first tab as active
    if (tabButtons.length > 0) {
      tabButtons[0].click();
    }
  });
</script>

Material Design Tabs Component

A complex, monochromatic Material Design inspired tabs component for dashboards, featuring responsive design, dark mode support, and interactive elements. Uses grid-based layouts and subtle shadow effects.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">

    <!-- Tabs Header -->
    <div class="flex border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-hide">
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-overview">
        Overview
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-red-500 text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 focus:outline-none focus:text-red-700 focus:border-red-600 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-analytics">
        Analytics
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-reports">
        Reports
      </button>
      <button class="flex-1 py-4 px-4 text-center text-sm sm:text-base font-medium border-b-2 border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:text-gray-900 focus:border-red-500 transition duration-300 ease-in-out whitespace-nowrap" id="tab-btn-settings">
        Settings
      </button>
    </div>

    <!-- Tab Content Container -->
    <div class="p-4 sm:p-6 md:p-8 space-y-8">

      <!-- Analytics Tab Content (Active by default for demonstration) -->
      <div id="tab-content-analytics">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Dashboard Analytics</h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <!-- Card 1: Total Sales -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Total Sales</h3>
              <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 12h-3m-6 0h-3m8-4zm0 16-5-5h-2.586a1 1 0 01-.707-.293L11.707 10.5M10 5L3 12h3m0 0l-3-3m5 3v5c0 1.105.895 2 2 2h4c1.105 0 2-.895 2-2v-5" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">$12,450</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last month</p>
          </div>

          <!-- Card 2: New Users -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">New Users</h3>
              <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h-5m-1.58-6.425a.86.86 0 011.66 0c0 .942-.51 1.764-1.29 2.193M11 11a4 4 0 100 8h2a4 4 0 100-8h-2zM9 11l4 4m0-4l-4 4" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">870</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">+5% from last week</p>
          </div>

          <!-- Card 3: Traffic Source -->
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 transition-transform duration-300 hover:scale-105 hover:shadow-lg">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">Traffic Source</h3>
              <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
            </div>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Google Organic</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">65% of total traffic</p>
          </div>
        </div>

        <!-- Larger Chart Card -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Sales Performance (Monthly)</h3>
          <img class="w-full h-auto rounded" src="https://picsum.photos/800/400?random=1" alt="Sales Performance Chart">
        </div>

        <!-- Recent Activity Table -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 p-6 pb-0">Recent Activity</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Event</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                </tr>
              </thead>
              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">New order #1001</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">John Doe</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Completed</span>
                  </td>
                </tr>
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Product view: 'Widget X'</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Jane Smith</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">Viewed</span>
                  </td>
                </tr>
                 <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Login attempt failed</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                      <div class="flex-shrink-0 h-10 w-10">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/50.jpg" alt="">
                      </div>
                      <div class="ml-4">
                        <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Peter Jones</div>
                        <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Failed</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>

       <!-- Overview Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-overview" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Company Overview</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Welcome to your dashboard! Here you can find a quick summary of your key metrics and recent activities.
          This section provides a high-level view of your business performance, allowing you to gauge overall health at a glance.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Key Highlights</h3>
            <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
              <li><span class="font-medium text-gray-800 dark:text-gray-200">Revenue Last 30 Days:</span> <span class="text-green-600 dark:text-green-400">$50,000</span></li>
              <li><span class="font-medium text-gray-800 dark:text-gray-200">Active Customers:</span> <span class="text-red-600 dark:text-red-400">1,200</span></li>
              <li><span class="font-medium text-gray-800 dark:text-gray-200">New Signups This Month:</span> <span class="text-blue-600 dark:text-blue-400">150</span></li>
            </ul>
             <div class="mt-6">
              <img class="w-full h-48 sm:h-56 object-cover rounded" src="https://picsum.photos/400/250?random=2" alt="Overview Image">
            </div>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Quick Actions</h3>
            <ul class="space-y-3">
              <li>
                <button class="w-full text-left p-3 rounded-md bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-800/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                  Create New Report
                </button>
              </li>
              <li>
                <button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                  View All Notifications
                </button>
              </li>
              <li>
                <button class="w-full text-left p-3 rounded-md bg-gray-50 dark:bg-gray-700/30 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600/50 shadow-sm transition duration-200 flex items-center">
                  <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                  Adjust Settings
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Reports Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-reports" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Detailed Reports</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Access a variety of advanced reports to gain deeper insights into your data. You can filter and export these reports.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Sales by Region</h3>
            <img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=3" alt="Sales by Region Chart">
            <p class="text-sm text-gray-600 dark:text-gray-400">Visualize sales performance across different geographical regions. Identify top-performing areas.</p>
            <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download CSV
            </button>
          </div>
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Customer Demographics</h3>
            <img class="w-full h-48 sm:h-56 object-cover rounded mb-4" src="https://picsum.photos/400/250?random=4" alt="Customer Demographics Chart">
            <p class="text-sm text-gray-600 dark:text-gray-400">Understand your customer base better with detailed demographic breakdowns and engagement metrics.</p>
            <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
              Download PDF
            </button>
          </div>
        </div>
      </div>

      <!-- Settings Tab Content (Hidden by default, for demonstration) -->
      <div id="tab-content-settings" class="hidden">
        <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-900 dark:text-gray-100">Account Settings</h2>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
          Manage your account preferences, notifications, and security settings here.
        </p>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700 mb-6">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Profile Information</h3>
          <form class="space-y-4">
            <div>
              <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
              <input type="text" id="full-name" name="full-name" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="John Doe">
            </div>
            <div>
              <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
              <input type="email" id="email-address" name="email-address" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-red-500 focus:border-red-500 sm:text-sm bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100" value="[email protected]">
            </div>
            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-800">
              Save Changes
            </button>
          </form>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-4">Notification Preferences</h3>
          <fieldset class="space-y-4">
            <legend class="sr-only">Notification Preferences</legend>
            <div class="relative flex items-start">
              <div class="flex items-center h-5 w-5">
                <input id="email-notifications" name="email-notifications" type="checkbox" checked class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
              </div>
              <div class="ml-3 text-sm">
                <label for="email-notifications" class="font-medium text-gray-700 dark:text-gray-300">Email Notifications</label>
                <p class="text-gray-500 dark:text-gray-400">Receive updates and announcements via email.</p>
              </div>
            </div>
            <div class="relative flex items-start">
              <div class="flex items-center h-5 w-5">
                <input id="sms-notifications" name="sms-notifications" type="checkbox" class="focus:ring-red-500 h-4 w-4 text-red-600 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:checked:bg-red-600">
              </div>
              <div class="ml-3 text-sm">
                <label for="sms-notifications" class="font-medium text-gray-700 dark:text-gray-300">SMS Notifications</label>
                <p class="text-gray-500 dark:text-gray-400">Get critical alerts on your mobile device.</p>
              </div>
            </div>
          </fieldset>
        </div>
      </div>

    </div>
  </div>

  <!-- Simple Script for Tab Functionality (can be externalized) -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabButtons = document.querySelectorAll('.flex.border-b button');
      const tabContents = document.querySelectorAll('[id^="tab-content-"]');

      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          // Deactivate all buttons and hide all content
          tabButtons.forEach(btn => {
            btn.classList.remove('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
            btn.classList.add('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
          });
          tabContents.forEach(content => {
            content.classList.add('hidden');
          });

          // Activate clicked button and show corresponding content
          const targetId = button.id.replace('tab-btn-', 'tab-content-');
          document.getElementById(targetId).classList.remove('hidden');
          button.classList.add('border-red-500', 'text-red-600', 'bg-red-50', 'dark:text-red-400', 'dark:bg-red-900/20');
          button.classList.remove('border-transparent', 'text-gray-500', 'dark:text-gray-400', 'hover:bg-gray-50', 'dark:hover:bg-gray-700', 'focus:text-gray-900', 'focus:border-red-500');
        });
      });

      // Trigger click on 'Analytics' tab by default to make it active on load
      document.getElementById('tab-btn-analytics').click();
    });
  </script>

</div>

Search Components

Categories

Tabs