Search Components

All Components

Browse all available Tailwind CSS components

Carousel Slider Component

A simple, responsive carousel slider component with Material Design aesthetics, sepia/brown tones, and dark mode support, suitable for a portfolio. Uses no JavaScript, making it a purely CSS-driven component.

Open Preview

                <div class="relative w-full overflow-hidden bg-orange-50 dark:bg-zinc-800 py-12 sm:py-16 md:py-20 lg:py-24 font-sans">
  <div class="relative container mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Hidden radio inputs for carousel functionality (CSS only) -->
    <input type="radio" name="carousel-material" id="slide-1-material" class="hidden" checked>
    <input type="radio" name="carousel-material" id="slide-2-material" class="hidden">
    <input type="radio" name="carousel-material" id="slide-3-material" class="hidden">

    <div class="carousel-inner relative w-full flex transition-transform duration-500 ease-in-out" style="transform: translateX(calc(var(--carousel-translate-x, 0) * 100%));">
      <!-- Slide 1 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material1/600/400" alt="Project 1 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Elegant Web Design</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Crafting beautiful and functional websites with a focus on user experience and modern aesthetics. This project showcases a sophisticated approach to digital presence.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              View Project
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material2/600/400" alt="Project 2 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Mobile App Development</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Building intuitive and high-performing mobile applications for iOS and Android, ensuring seamless user interaction and robust functionality.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              Discover More
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material3/600/400" alt="Project 3 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Brand Identity Creation</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Developing strong and recognizable brand identities through comprehensive logo design, brand guidelines, and visual communication strategies.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              See Case Study
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Dots -->
    <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-3 mt-6 sm:mt-8">
      <label for="slide-1-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-2-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-3-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"> </label>
    </div>

    <!-- CSS for Carousel functionality (embed Tailwind custom classes or use external CSS) -->
    <style>
      /* Base styles for the carousel -- if not using a build tool, this would be in a style tag or separate CSS file */
      .carousel-inner {
        display: flex;
      }
      .carousel-item {
        flex-shrink: 0;
        width: 100%;
      }
      
      /* Carousel navigation using hidden radio inputs */
      #slide-1-material:checked ~ .carousel-inner {
        --carousel-translate-x: 0;
      }
      #slide-2-material:checked ~ .carousel-inner {
        --carousel-translate-x: -1;
      }
      #slide-3-material:checked ~ .carousel-inner {
        --carousel-translate-x: -2;
      }

      /* Navigation dot active state */
      #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #92400e; /* amber-800 */
        transform: scale(1.2);
        box-shadow: 0 0px 8px rgba(0,0,0,0.3);
      }
      /* Dark mode active state */
      .dark #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      .dark #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      .dark #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #ea580c; /* orange-600 */
      }
    </style>
  </div>
</div>

Neon_Glow_Gaming_Layout

A complex, responsive gaming layout component with neon/glow effects and a grayscale color scheme, supporting dark mode.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-black dark:text-gray-100 font-mono overflow-hidden">

  <!-- Global Glow Background (Pseudo-elements or JS for better control, but using divs for pure HTML/CSS) -->
  <div class="absolute inset-0 z-0 opacity-20">
    <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-gray-700/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow"></div>
    <div class="absolute top-1/2 left-3/4 w-80 h-80 bg-gray-500/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-2000"></div>
    <div class="absolute bottom-1/4 left-1/2 w-72 h-72 bg-gray-600/30 rounded-full mix-blend-screen filter blur-3xl animate-pulse-slow animation-delay-4000"></div>
  </div>

  <!-- Main Content Container with Z-index to be above glows -->
  <div class="relative z-10 container mx-auto px-4 py-8 md:py-12 lg:py-16">

    <!-- Header -->
    <header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 border-b-2 border-gray-700 pb-4">
      <h1 class="text-4xl lg:text-5xl font-extrabold tracking-in-contract text-gray-100 drop-shadow-lg [text-shadow:_0_0_10px_rgb(255_255_255_/_0.5),_0_0_20px_rgb(255_255_255_/_0.3)] mb-4 md:mb-0">
        NEON NEXUS
      </h1>
      <nav class="flex space-x-6 text-gray-400 text-lg">
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Home
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Games
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Community
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
        <a href="#" class="relative group hover:text-gray-100 transition-colors duration-300">
          Profile
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-line"></span>
        </a>
      </nav>
    </header>

    <!-- Main Layout Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">

      <!-- Left Sidebar (Player Info / Quick Menu) -->
      <aside class="lg:col-span-1 border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
        <div class="flex flex-col items-center mb-6">
          <img class="w-24 h-24 rounded-full border-2 border-gray-700 p-1 mb-4 glow-avatar" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Player Avatar">
          <h3 class="text-2xl font-bold text-gray-100 glow-text">GamerTagX</h3>
          <span class="text-sm text-gray-400">Level 99 - Elite</span>
        </div>
        <ul class="space-y-4 text-gray-300">
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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.75 17L9 20l-1 1h4l-1-1 1-6M7 10h10a2 2 0 012 2v8a2 2 0 01-2 2H7a2 2 0 01-2-2v-8a2 2 0 012-2z"></path></svg>
              My Library
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              Chat Rooms
            </a>
          </li>
          <li class="hover:text-gray-100 transition-colors duration-300">
            <a href="#" class="block p-2 rounded-md hover:bg-gray-800/70 glow-item flex items-center">
              <svg class="w-6 h-6 mr-2 glow-icon" 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>
              Settings
            </a>
          </li>
        </ul>
        <button class="mt-8 w-full py-3 border border-gray-700 bg-gray-800/50 text-gray-200 rounded-md hover:bg-gray-700/70 transition-colors duration-300 glow-button">
          Logout
        </button>
      </aside>

      <!-- Main Content Area (Featured Games / News) -->
      <main class="lg:col-span-2 space-y-8">

        <!-- Featured Game Carousel (Simplified) -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Featured Warzone</h2>
          <div class="relative w-full h-64 md:h-80 rounded-md overflow-hidden border border-gray-700 glow-inset">
            <img class="w-full h-full object-cover object-center " src="https://picsum.photos/1200/600?random=1" alt="Featured Game 1">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950 to-transparent flex items-end p-6">
              <h3 class="text-2xl font-bold text-gray-50 glow-text drop-shadow-md">CYBERPUNK ARENA 2077</h3>
              <button class="absolute bottom-6 right-6 px-5 py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button-play">
                Play Now
              </button>
            </div>
          </div>
          <div class="flex justify-center mt-4 space-x-2">
            <span class="block w-3 h-3 rounded-full bg-gray-600 glow-dot-active"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
            <span class="block w-3 h-3 rounded-full bg-gray-800 glow-dot"></span>
          </div>
        </section>

        <!-- Latest News/Updates -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-3xl font-bold mb-6 text-gray-100 glow-text">Latest Intel & Updates</h2>
          <div class="space-y-6">
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=2" alt="News Item 1">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Patch 1.0.5 'Phantom Echoes' Released!</h3>
                <p class="text-gray-400 text-sm">Major balance changes for all classes, new map 'The Void', and enhanced anti-cheat measures. Download now!</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Read More &rarr;</a>
              </div>
            </article>
            <article class="flex flex-col md:flex-row bg-gray-900/70 p-4 rounded-md border border-gray-800 hover:border-gray-700 glow-card">
              <img class="w-full md:w-32 h-32 object-cover rounded-md mr-4 mb-4 md:mb-0 glow-image-border" src="https://picsum.photos/300/200?random=3" alt="News Item 2">
              <div>
                <h3 class="text-xl font-bold text-gray-100 mb-2 glow-text">Community Tournament Sign-ups Open</h3>
                <p class="text-gray-400 text-sm">Compete for glory and exclusive in-game rewards! Register your team before April 30th.</p>
                <a href="#" class="text-gray-500 hover:text-gray-300 text-sm mt-2 block glow-link">Sign Up &rarr;</a>
              </div>
            </article>
          </div>
        </section>

      </main>

      <!-- Right Sidebar (Live Stream / Friends List) -->
      <aside class="lg:col-span-1 space-y-8 flex flex-col">

        <!-- Live Stream Widget -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border flex-grow">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Live Missions</h2>
          <div class="relative w-full aspect-video rounded-md overflow-hidden border border-gray-700 mb-4 glow-inset">
            <img class="w-full h-full object-cover" src="https://picsum.photos/400/225?random=4" alt="Live Stream Placeholder">
            <div class="absolute top-2 left-2 bg-red-600 text-gray-50 text-xs px-2 py-1 rounded glow-live">LIVE</div>
            <div class="absolute inset-0 bg-gradient-to-t from-gray-950/70 to-transparent flex items-end p-3">
              <span class="text-xs text-gray-300 drop-shadow-sm">@StreamerProX <span class="text-gray-500">(1.2K Viewers)</span></span>
            </div>
          </div>
          <p class="text-gray-400 text-sm mb-4">'Conquering the Wasteland' - Join me for an epic solo run!</p>
          <button class="w-full py-2 bg-gray-700/70 border border-gray-600 text-gray-50 rounded-md hover:bg-gray-600/90 transition-all duration-300 glow-button">
            Watch Stream
          </button>
        </section>

        <!-- Friends Online List -->
        <section class="border border-gray-800 rounded-lg p-6 bg-gray-900/50 backdrop-blur-sm glow-border">
          <h2 class="text-2xl font-bold mb-4 text-gray-100 glow-text">Squad Online [<span class="text-green-500 drop-shadow-md [text-shadow:_0_0_5px_rgb(34_197_94_/_0.7)]">3</span>]</h2>
          <ul class="space-y-3">
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Neo_Warrior</span>
                <span class="block text-xs text-gray-500">In-game: Cyberpunk Arena</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/men/22.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">Byte_Crusher</span>
                <span class="block text-xs text-gray-500">Online, Idle</span>
              </div>
            </li>
            <li class="flex items-center text-gray-300">
              <img class="w-10 h-10 rounded-full border-2 border-green-500 p-0.5 mr-3 glow-avatar-online" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold glow-text">GhostlyGamer</span>
                <span class="block text-xs text-gray-500">In-game: Warzone Rifts</span>
              </div>
            </li>
            <li class="flex items-center text-gray-500 opacity-70">
              <img class="w-10 h-10 rounded-full border-2 border-gray-700 p-0.5 mr-3" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Friend Avatar">
              <div>
                <span class="font-bold">Offline_Dude</span>
                <span class="block text-xs text-gray-600">Offline</span>
              </div>
            </li>
          </ul>
        </section>

      </aside>

    </div>

    <!-- Footer (simple) -->
    <footer class="mt-12 text-center text-gray-600 text-sm border-t-2 border-gray-800 pt-6">
      <p>&copy; 2077 Neon Nexus. All rights reserved. <span class="text-gray-700">[Powered by Cybernetic Code]</span></p>
    </footer>

  </div>

  <!-- Custom Tailwind CSS (for animations) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { transform: scale(1); opacity: 0.2; }
      50% { transform: scale(1.1); opacity: 0.35; }
    }

    @keyframes tracking-in-contract {
      0% {
        letter-spacing: 1em;
        opacity: 0;
      }
      40% {
        opacity: 0.6;
      }
      100% {
        letter-spacing: normal;
        opacity: 1;
      }
    }

    .animate-pulse-slow {
      animation: pulse-slow 6s ease-in-out infinite;
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }
    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .tracking-in-contract {
      animation: tracking-in-contract 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }

    .glow-line {
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    .glow-border {
        box-shadow: 0 0 10px rgba(150, 150, 150, 0.15), 0 0 20px rgba(150, 150, 150, 0.05);
    }
    .dark .glow-border {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.05);
    }

    .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.05);
    }
    .dark .glow-item:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.08);
    }

    .glow-text {
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-text {
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    .glow-card:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), 0 0 30px rgba(150, 150, 150, 0.1);
        transform: translateY(-2px);
    }
    .dark .glow-card:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.15), 0 0 30px rgba(255, 255, 255, 0.08);
    }

    .glow-button {
        box-shadow: 0 0 8px rgba(150, 150, 150, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05);
    }
    .glow-button:hover {
        box-shadow: 0 0 15px rgba(150, 150, 150, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }
    .dark .glow-button {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.08);
    }
    .dark .glow-button:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.15);
    }

    .glow-button-play {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.0); /* softer initial glow for play button */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .glow-button-play:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .glow-live {
        box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
    }

    .glow-avatar {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }

    .glow-avatar-online {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
    }

    .glow-dot-active {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
    }
    .dark .glow-dot-active {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    .glow-dot {
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.2);
    }
    .dark .glow-dot {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    .glow-inset {
        box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-inset {
        box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
    }

    .glow-image-border {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
    .dark .glow-image-border {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
    }

    .glow-link:hover {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

  </style>
</div>

Gaming 3D Purple Lightbox

A simple, responsive image lightbox component with 3D design elements and a purple/violet color scheme, suitable for gaming websites.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-violet-300 to-purple-400 dark:from-gray-900 dark:via-gray-800 dark:to-purple-950 p-4 font-sans">

  <!-- Lightbox Overlay (Hidden by default, shown via JS in a real app) -->
  <div class="fixed inset-0 bg-black bg-opacity-70 dark:bg-opacity-80 flex items-center justify-center z-50 transition-opacity duration-300 opacity-0 pointer-events-none" id="lightbox-overlay">
    <div class="relative w-11/12 max-w-4xl p-2 md:p-4 bg-gradient-to-br from-violet-700 to-purple-900 rounded-xl shadow-2xl dark:from-violet-900 dark:to-purple-950 transform scale-95 opacity-0 transition-all duration-300 ease-out" id="lightbox-content">
      
      <!-- Inner pseudo-3D container -->
      <div class="p-1.5 md:p-2 bg-gradient-to-br from-purple-500/30 to-violet-900/30 rounded-lg transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 shadow-lg dark:from-purple-800/30 dark:to-violet-950/30 backdrop-blur-sm">
        <div class="p-1.5 md:p-2 bg-gradient-to-br from-violet-600/30 to-purple-800/30 rounded-md transform rotate-x-3 rotate-y-1 skew-x-0.5 skew-y-0.5 shadow-md dark:from-violet-800/30 dark:to-purple-900/30 backdrop-blur-sm">
          
          <img src="https://picsum.photos/1200/800" alt="Full size game screenshot" class="w-full h-auto rounded-lg shadow-xl border-2 border-purple-400 dark:border-violet-600">
        </div>
      </div>

      <!-- Close Button -->
      <button class="absolute top-0 right-0 -mr-2 -mt-2 md:-mr-4 md:-mt-4 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg transform rotate-45 hover:rotate-90 transition-transform duration-300 ease-in-out border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>

      <!-- Navigation Buttons (Optional, for a gallery) -->
      <button class="absolute left-0 top-1/2 -ml-4 md:-ml-8 transform -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-200 border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" 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="M15 19l-7-7 7-7"></path>
        </svg>
      </button>
      <button class="absolute right-0 top-1/2 -mr-4 md:-mr-8 transform -translate-y-1/2 bg-purple-600 hover:bg-purple-700 text-white rounded-full p-2 md:p-3 shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-200 border-2 border-purple-400 dark:bg-purple-800 dark:hover:bg-purple-900 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-purple-300/50 dark:focus:ring-purple-700/50">
        <svg class="w-6 h-6 md:w-8 md:h-8" 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 5l7 7-7 7"></path>
        </svg>
      </button>

    </div>
  </div>

  <!-- Example Trigger Image (Click this to trigger the lightbox visually here) -->
  <div class="relative group w-64 md:w-80 lg:w-96 transform hover:scale-105 transition-transform duration-300 ease-in-out cursor-pointer" onclick="document.getElementById('lightbox-overlay').classList.add('opacity-100', 'pointer-events-auto'); document.getElementById('lightbox-content').classList.remove('scale-95', 'opacity-0'); document.getElementById('lightbox-content').classList.add('scale-100', 'opacity-100');">
    <div class="relative p-2 md:p-3 bg-gradient-to-br from-violet-700 to-purple-900 rounded-xl shadow-2xl dark:from-violet-900 dark:to-purple-950 transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 group-hover:rotate-x-3 group-hover:rotate-y-1 group-hover:skew-x-0.5 group-hover:skew-y-0.5 transition-all duration-300 ease-out">
      <!-- Inner pseudo-3D container -->
      <div class="p-1.5 md:p-2 bg-gradient-to-br from-purple-500/30 to-violet-900/30 rounded-lg transform rotate-x-6 rotate-y-3 skew-x-1 skew-y-1 shadow-lg dark:from-purple-800/30 dark:to-violet-950/30 backdrop-blur-sm group-hover:rotate-x-3 group-hover:rotate-y-1 group-hover:skew-x-0.5 group-hover:skew-y-0.5 transition-all duration-300 ease-out">
        <div class="p-1.5 md:p-2 bg-gradient-to-br from-violet-600/30 to-purple-800/30 rounded-md transform rotate-x-3 rotate-y-1 skew-x-0.5 skew-y-0.5 shadow-md dark:from-violet-800/30 dark:to-purple-900/30 backdrop-blur-sm group-hover:rotate-x-0 group-hover:rotate-y-0 group-hover:skew-x-0 group-hover:skew-y-0 transition-all duration-300 ease-out">
          <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto object-cover rounded-lg shadow-xl border-2 border-purple-400 dark:border-violet-600">
          <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg">
            <svg class="w-10 h-10 text-white" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <p class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-sm text-purple-800 dark:text-purple-300 shadow-text transform -rotate-1 skew-x-1 group-hover:-rotate-0 group-hover:skew-x-0 transition-all duration-300 ease-out">Click to Enlarge</p>
  </div>

  <!-- Simple toggle for dark mode (for demo purposes) -->
  <button onclick="document.documentElement.classList.toggle('dark')" class="absolute bottom-4 right-4 bg-purple-600 text-white px-4 py-2 rounded-full shadow-lg hover:bg-purple-700 transition-colors duration-300 dark:bg-violet-800 dark:hover:bg-violet-900">
    Toggle Dark Mode
  </button>

  <!-- Inline script for demonstration. In a real app, use external JS. -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const lightboxOverlay = document.getElementById('lightbox-overlay');
      const lightboxContent = document.getElementById('lightbox-content');

      // Close lightbox when clicking outside the content or on the close button
      lightboxOverlay.addEventListener('click', (event) => {
        if (event.target === lightboxOverlay || event.target.closest('button')) {
          lightboxContent.classList.remove('scale-100', 'opacity-100');
          lightboxContent.classList.add('scale-95', 'opacity-0');
          lightboxOverlay.classList.remove('opacity-100', 'pointer-events-auto');
        }
      });

       // Close lightbox with ESC key
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && lightboxOverlay.classList.contains('opacity-100')) {
          lightboxContent.classList.remove('scale-100', 'opacity-100');
          lightboxContent.classList.add('scale-95', 'opacity-0');
          lightboxOverlay.classList.remove('opacity-100', 'pointer-events-auto');
        }
      });
    });
  </script>

</div>

3D_Education_Form_Component

A responsive, high-contrast 3D-inspired form component for educational platforms, supporting dark mode.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700
              transform perspective-1000 rotateX-0 rotateY-0 hover:rotateX-3 hover:rotateY-3 transition-all duration-500 ease-in-out
              group dark:shadow-2xl dark:shadow-indigo-900/50">

    <!-- 3D Top Edge Effect -->
    <div class="absolute top-0 left-0 w-full h-4 bg-gradient-to-b from-gray-100 to-transparent dark:from-gray-700 -z-10
                transform rotateX-10 origin-top opacity-50"></div>

    <!-- 3D Bottom Edge Effect -->
    <div class="absolute bottom-0 left-0 w-full h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateX-10 origin-bottom opacity-50"></div>

    <!-- 3D Left Edge Effect -->
    <div class="absolute top-0 left-0 h-full w-4 bg-gradient-to-r from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateY-10 origin-left opacity-50"></div>

    <!-- 3D Right Edge Effect -->
    <div class="absolute top-0 right-0 h-full w-4 bg-gradient-to-l from-gray-100 to-transparent dark:from-gray-700 -z-10 
                transform rotateY-10 origin-right opacity-50"></div>


    <div class="p-6 sm:p-8 flex flex-col items-center">
      <div class="mb-6 text-center">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight relative z-10">
          <span class="relative inline-block">
            Pathway to Knowledge
            <span class="absolute inset-x-0 bottom-0 h-2 bg-indigo-500 dark:bg-indigo-600 rounded-full opacity-60 transform translate-y-1 scale-x-75 group-hover:scale-x-90 transition-transform duration-300"></span>
          </span>
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300">Unlock your potential, one step at a time.</p>
      </div>

      <form class="w-full space-y-5">
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Full Name</label>
          <input type="text" id="full-name" name="full-name" placeholder="Jane Doe"
                 class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                        bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400
                        transition-all duration-200 ease-in-out
                        transform group-hover:scale-[1.01] hover:shadow-md">
        </div>

        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]"
                 class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                        bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-400
                        transition-all duration-200 ease-in-out
                        transform group-hover:scale-[1.01] hover:shadow-md">
        </div>

        <div>
          <label for="course" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Select a Course</label>
          <div class="relative">
            <select id="course" name="course"
                    class="block appearance-none w-full px-4 py-2 pr-8 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400
                           bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white
                           transition-all duration-200 ease-in-out
                           transform group-hover:scale-[1.01] hover:shadow-md">
              <option value="" disabled selected>Choose an option</option>
              <option value="web-dev">Web Development Fundamentals</option>
              <option value="data-sci">Introduction to Data Science</option>
              <option value="ux-design">UX/UI Design Principles</option>
              <option value="ai-ml">AI & Machine Learning Basics</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-200">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/>
              </svg>
            </div>
          </div>
        </div>

        <div class="flex items-center">
          <input id="terms" name="terms" type="checkbox"
                 class="h-4 w-4 text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500 dark:focus:ring-indigo-400 border-gray-300 dark:border-gray-600 rounded
                        transform group-hover:scale-[1.05] transition-transform duration-200">
          <label for="terms" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
            I agree to the <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Terms of Service</a>
          </label>
        </div>

        <button type="submit"
                class="w-full relative py-3 px-4 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-700 dark:to-purple-700 text-white font-semibold rounded-lg
                       shadow-lg hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-500/50 dark:focus:ring-indigo-400/50
                       transform translate-z-0 group-hover:translate-z-3 transition-all duration-300 ease-in-out
                       group-hover:scale-105 group-hover:from-indigo-700 group-hover:to-purple-700 dark:group-hover:from-indigo-600 dark:group-hover:to-purple-600">
          
          <span class="absolute inset-0 flex items-center justify-center -z-10 group-hover:opacity-0 transition-opacity duration-300">
            <span class="bg-indigo-700 dark:bg-indigo-800 rounded-lg absolute inset-0 transform translate-y-1 translate-x-1 opacity-75 blur-sm"></span>
          </span>
          <span class="relative z-10">Enroll Now</span>
          <svg class="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out transform -translate-x-full group-hover:translate-x-0" 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 8l4 4m0 0l-4 4m4-4H3"></path>
          </svg>
        </button>
      </form>

      <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 text-center">
        By enrolling, you agree to receive educational updates and offers.
      </p>
    </div>
  </div>
</div>

<style>
  /* This is for tailwind's JIT compiler to pick up custom values */
  /* If you are using Tailwind Play or a full build, you might not need this explicitly */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotateX-3 {
    transform: rotateX(3deg);
  }
  .rotateY-3 {
    transform: rotateY(3deg);
  }
  .rotateX-10 {
    transform: rotateX(10deg);
  }
  .rotateY-10 {
    transform: rotateY(10deg);
  }
  .translate-z-0 {
    transform: translateZ(0);
  }
  .translate-z-3 {
    transform: translateZ(12px); /* equivalent to translate-z-3 */
  }
</style>

Bauhaus_Agriculture_Search_Box

Responsive search box component for agriculture/farming websites, designed with Bauhaus principles, sepia/brown tones, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 border-b border-amber-200 dark:border-stone-700 font-sans">
  <div class="max-w-4xl mx-auto py-4 sm:py-6 md:py-8 bg-amber-100 dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border-2 border-amber-300 dark:border-stone-700">
    <div class="px-5 py-4 sm:px-6 sm:py-5 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 sm:mb-0 text-center sm:text-left tracking-wider uppercase">
        Field Finder
      </h2>
      <div class="relative w-full sm:w-auto flex-grow max-w-md">
        <input type="text" placeholder="Search crops, fields, or equipment..." class="w-full py-3 pl-12 pr-4 rounded-full bg-amber-50 dark:bg-stone-700 text-stone-700 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300 border border-amber-300 dark:border-stone-600 shadow-inner text-base sm:text-lg transition-all duration-300 ease-in-out">
        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-stone-500 dark:text-stone-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-5 py-4 sm:px-6 sm:py-5 border-t border-amber-200 dark:border-stone-700">
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012.707 13H3a1 1 0 000-2H2.707L3 10.707V8a7 7 0 0114 0v2.707l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a6 6 0 00-6-6zM5 16a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path></svg>
        Plots
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a1 1 0 00-1-1H4a1 1 0 00-1 1v.586L2.707 9.707A1 1 0 012.707 11H3a1 1 0 100-2h.293l-.707-.707V8a2 2 0 012-2h2zm0 6a2 2 0 100 4h8a2 2 0 100-4H6z" clip-rule="evenodd"></path></svg>
        Crops
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM10 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM13 3a1 1 0 00-2 0v1a1 1 0 002 0V3z"></path><path fill-rule="evenodd" d="M3 8a3 3 0 013-3h8a3 3 0 013 3v7a3 3 0 01-3 3H6a3 3 0 01-3-3V8zm5-1a1 1 0 000 2h4a1 1 0 100-2H8zm-1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
        Equipment
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 1V.5a.5.5 0 011 0V1A5.5 5.5 0 007 6.5h6A5.5 5.5 0 0018.5 1V.5a.5.5 0 011 0V1a6.5 6.5 0 01-6.5 6.5H7A6.5 6.5 0 01.5 1zM2 11.5a1 1 0 112 0 1 1 0 01-2 0zm14 0a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path><path d="M11 5H9a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1zm3 11a1 1 0 100-2 1 1 0 000 2zm-8 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
        Weather
      </button>
    </div>
  </div>
</div>

Brutalism Add to Cart Button

A simple, brutalist-style 'Add to Cart' button component with high contrast, complementary colors, and social media purpose. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-zinc-900 font-sans">
  <button class="relative group overflow-hidden px-6 py-3 bg-red-600 text-white font-black uppercase tracking-wider border-4 border-black dark:border-white text-lg sm:text-xl md:text-2xl transition-all duration-300 ease-in-out
    shadow-[8px_8px_0_0_#A855F7] hover:shadow-[12px_12px_0_0_#A855F7] dark:shadow-[8px_8px_0_0_#EC4899] dark:hover:shadow-[12px_12px_0_0_#EC4899]
    hover:-translate-y-1 hover:-translate-x-1 focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-red-500 dark:focus:ring-pink-500 dark:focus:ring-offset-zinc-900">
    
    <span class="absolute inset-0 bg-purple-600 dark:bg-pink-600 border-4 border-black dark:border-white -z-10
      transform translate-x-2 translate-y-2 group-hover:translate-x-3 group-hover:translate-y-3 transition-all duration-300 ease-in-out"></span>
    
    <span class="flex items-center space-x-3">
      <svg class="w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9" 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

  </button>
</div>

Heat Maps Component

A simple, responsive heat map component for agriculture/farming websites, featuring a retro/vintage color scheme and dark mode support, designed with microinteractions in mind.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-colors duration-300">
    <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Field Soil Moisture Heatmap</h2>
      <div class="relative group">
        <button class="px-4 py-2 bg-green-700 hover:bg-green-600 active:bg-green-800 text-white text-sm font-semibold rounded-md shadow-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-75 transition-all duration-200 ease-in-out transform group-hover:scale-105 group-hover:rotate-1 group-active:scale-95">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 17V6zm9 6a1 1 0 11-2 0 1 1 0 012 0zm-3 1a1 1 0 100-2 1 1 0 000 2zm6-2a1 1 0 11-2 0 1 1 0 012 0z" clip-rule="evenodd" />
          </svg>
          View Details
        </button>
        <div class="absolute bottom-full mb-2 hidden group-hover:block transition-all duration-300 ease-out opacity-0 group-hover:opacity-100 -left-8 right-0 mx-auto w-48 p-2 text-xs text-white bg-gray-700 dark:bg-gray-900 rounded-md shadow-lg pointer-events-none origin-bottom scale-90 group-hover:scale-100">
          More information about this heatmap.
          <div class="absolute left-1/2 -ml-1 w-0 h-0 border-solid border-8 border-transparent border-t-gray-700 dark:border-t-gray-900 transform translate-y-full -bottom-2"></div>
        </div>
      </div>
    </div>
    <div class="p-6">
      <div class="flex flex-col md:flex-row gap-6">
        <div class="relative flex-1 bg-gradient-to-br from-indigo-200 via-teal-200 to-yellow-200 dark:from-indigo-900/40 dark:via-teal-900/40 dark:to-yellow-900/40 rounded-lg p-6 shadow-inner overflow-hidden border-2 border-dashed border-gray-400 dark:border-gray-600 transition-all duration-300 group-hover:border-solid">
          <div class="absolute inset-0 bg-contain bg-no-repeat bg-center opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/seed/farm/800/600'); filter: grayscale(100%);"></div>
          <div class="relative grid grid-cols-5 md:grid-cols-10 gap-1.5 auto-rows-min md:auto-rows-fr h-full" style="min-height: 200px;">
            <!-- Heatmap Cells -->
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="85%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">85%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="78%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">78%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="72%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">72%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="65%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">65%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="59%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">59%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="52%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">52%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="45%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">45%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="39%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">39%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="33%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">33%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="28%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">28%</span>
            </div>
            <!-- Repeat for more cells, adjusting background-color and data-tooltip-value -->
             <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="88%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">88%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="81%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">81%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="75%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">75%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="68%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">68%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="62%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">62%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="55%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">55%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="48%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">48%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="42%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">42%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="36%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">36%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="30%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">30%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="90%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">90%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="83%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">83%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="77%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">77%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="70%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">70%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="64%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">64%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="57%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">57%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="50%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">50%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="44%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">44%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="38%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">38%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="32%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">32%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #fef08a); border-color: var(--cell-color-darker, #d9b62c);" data-tooltip-value="87%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">87%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f9e2ae); border-color: var(--cell-color-darker, #d1a65f);" data-tooltip-value="80%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">80%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #f2d596); border-color: var(--cell-color-darker, #c69b59);" data-tooltip-value="74%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">74%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #e0c878); border-color: var(--cell-color-darker, #b78f4a);" data-tooltip-value="67%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">67%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #c8b760); border-color: var(--cell-color-darker, #9a8a3a);" data-tooltip-value="61%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">61%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #b1a748); border-color: var(--cell-color-darker, #817a26);" data-tooltip-value="54%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">54%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #999738); border-color: var(--cell-color-darker, #656417);" data-tooltip-value="47%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">47%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #818728); border-color: var(--cell-color-darker, #4b4f00);" data-tooltip-value="41%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">41%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #697718); border-color: var(--cell-color-darker, #313300);" data-tooltip-value="35%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">35%</span>
            </div>
            <div class="relative w-full aspect-square bg-gray-300 dark:bg-gray-700 rounded-sm overflow-hidden flex items-center justify-center text-xs font-semibold text-gray-700 dark:text-gray-300 border-2 border-gray-300 dark:border-gray-700 group cursor-pointer hover:scale-105 active:scale-95 transition-all duration-150 ease-in-out" style="background-color: var(--cell-color, #516708); border-color: var(--cell-color-darker, #171800);" data-tooltip-value="29%">
               <span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black bg-opacity-30 text-white rounded-sm transition-opacity duration-200 ease-in-out text-base">29%</span>
            </div>
            <!-- More rows/cols as needed for a larger grid -->
          </div>
        </div>

        <div class="flex flex-col space-y-4 md:w-1/3 min-w-[150px]">
          <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Legend</h3>
            <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #fef08a;"></span>High Moisture (80-100%)</li>
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #e0c878;"></span>Medium Moisture (50-79%)</li>
              <li class="flex items-center"><span class="w-4 h-4 rounded-sm mr-2" style="background-color: #697718;"></span>Low Moisture (0-49%)</li>
            </ul>
          </div>
          <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg shadow-md">
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Last Updated</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300">2023-10-27, 10:30 AM</p>
            <div class="flex items-center space-x-2 mt-4 text-gray-600 dark:text-gray-300">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Operator Photo" class="w-8 h-8 rounded-full border-2 border-green-600 dark:border-green-400 object-cover transform hover:scale-110 transition-transform duration-200 animate-pulse-slight">
              <p class="text-sm">By John Doe, Farm Ops</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="p-6 pt-4 text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700">
      <p>Data provided by AgriSense Pro sensors. For optimal yield, consider irrigating areas with less than 60% soil moisture.</p>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for Retro/Vintage color palette for heatmap cells */
  /* These colors are manually set for demonstration */
  
  /* High Moisture (Warm/Yellow Tones) */
  [data-tooltip-value^='8'],
  [data-tooltip-value^='7'] {
    --cell-color: #fef08a; /* lightest yellow */
    --cell-color-darker: #d9b62c; /* darker yellow for border/active */
  }

  /* Medium Moisture (Muted Green/Brown Tones) */
  [data-tooltip-value^='6'],
  [data-tooltip-value^='5'] {
    --cell-color: #e0c878; /* light brown/khaki */
    --cell-color-darker: #b78f4a; /* darker brown for border/active */
  }

  /* Low Moisture (Desaturated Green/Gray Tones) */
  [data-tooltip-value^='4'],
  [data-tooltip-value^='3'],
  [data-tooltip-value^='2'] {
    --cell-color: #697718; /* muted dark green */
    --cell-color-darker: #313300; /* even darker green for border/active */
  }

  /* Example of how to add more nuanced colors if needed, e.g., for in-between ranges */
  [data-tooltip-value='85%'] { --cell-color: #fef08a; --cell-color-darker: #d9b62c; }
  [data-tooltip-value='78%'] { --cell-color: #f9e2ae; --cell-color-darker: #d1a65f; }
  [data-tooltip-value='72%'] { --cell-color: #f2d596; --cell-color-darker: #c69b59; }
  [data-tooltip-value='65%'] { --cell-color: #e0c878; --cell-color-darker: #b78f4a; }
  [data-tooltip-value='59%'] { --cell-color: #c8b760; --cell-color-darker: #9a8a3a; }
  [data-tooltip-value='52%'] { --cell-color: #b1a748; --cell-color-darker: #817a26; }
  [data-tooltip-value='45%'] { --cell-color: #999738; --cell-color-darker: #656417; }
  [data-tooltip-value='39%'] { --cell-color: #818728; --cell-color-darker: #4b4f00; }
  [data-tooltip-value='33%'] { --cell-color: #697718; --cell-color-darker: #313300; }
  [data-tooltip-value='28%'] { --cell-color: #516708; --cell-color-darker: #171800; }

  /* Ensure a smooth transition for colors if possible with more granular data points */
  /* This is a simplification; a real app would likely use JS to calculate colors based on value */

  @keyframes pulse-slight {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }

  .animate-pulse-slight {
    animation: pulse-slight 2s infinite ease-in-out;
  }

</style>

Luxury_Sepia_SaaS_Cards_Component

A complex, responsive cards component with a luxury/premium design style, sepia/brown color scheme, optimized for Technology/SaaS applications, including dark mode support and interactive elements.

Open Preview

                <div class="font-sans bg-amber-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 leading-tight tracking-tight">
        Elevate Your Platform
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto">
        Discover how our cutting-edge solutions empower businesses to achieve unprecedented efficiency and growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1: Advanced Analytics -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1015/600/400" alt="Advanced Analytics" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Advanced Analytics</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Data Intelligence</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Unlock profound insights with our sophisticated analytics suite. Transform raw data into actionable strategies that drive business growth and optimize performance.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Real-time data processing</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Predictive modeling tools</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Customizable dashboards</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Infrastructure -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1041/600/400" alt="Secure Cloud Infrastructure" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Secure Cloud</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Infrastructure</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Protect your valuable data with our robust and secure cloud infrastructure. Enjoy peace of mind knowing your operations are fortified against modern threats.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>End-to-end encryption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Compliance certifications</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Threat monitoring</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Explore Security
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Seamless Integration -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1043/600/400" alt="Seamless Integration" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Seamless Integration</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Ecosystem Harmony</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Connect effortlessly with your existing tools and workflows. Our platform is designed for maximum compatibility, ensuring a smooth transition and enhanced productivity.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>API-first architecture</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Pre-built connectors</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Developer-friendly documentation</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            View Integrations
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-16 text-center">
      <h3 class="text-3xl font-semibold text-stone-900 dark:text-stone-50 mb-6">What Our Clients Say</h3>
      <div class="max-w-xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-8 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8">
        <div class="flex-shrink-0">
          <img class="h-24 w-24 rounded-full object-cover ring-4 ring-amber-500 dark:ring-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="text-center md:text-left">
          <p class="text-lg text-stone-700 dark:text-stone-200 mb-4 italic leading-relaxed">
            "This platform has transformed our data analysis process. The insights are incredibly precise, and the ease of integration is unmatched."
          </p>
          <p class="text-stone-900 dark:text-stone-50 font-bold text-xl">Jane Doe</p>
          <p class="text-amber-700 dark:text-amber-400 text-sm font-medium">CEO, Global Innovations</p>
        </div>
      </div>
    </div>

  </div>
</div>

Minimalist CRM Navigation

A simple, minimalist navigation component for CRM/Business Tools, featuring a purple/violet color scheme and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-white dark:bg-gray-900 border-b border-purple-100 dark:border-purple-800 shadow-sm">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-purple-600 dark:text-purple-400 text-2xl font-bold tracking-tight">
            CRM<span class="text-purple-400 dark:text-purple-600 text-base ml-1">Lite</span>
          </a>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
          <!-- Current: "border-purple-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
          <a href="#" class="border-b-2 border-purple-600 text-purple-800 dark:text-purple-100 dark:border-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Dashboard
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Customers
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Tasks
          </a>
          <a href="#" class="border-b-2 border-transparent text-gray-500 hover:border-purple-300 hover:text-purple-700 dark:text-gray-300 dark:hover:border-purple-600 dark:hover:text-purple-400 inline-flex items-center px-1 pt-1 text-sm font-medium transition-colors duration-200">
            Reports
          </a>
        </div>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-purple-500 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <!-- Current: "bg-purple-50 border-purple-500 text-purple-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" -->
      <a href="#" class="bg-purple-50 border-purple-500 text-purple-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:bg-gray-800 dark:border-purple-400 dark:text-purple-300">
        Dashboard
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Customers
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Tasks
      </a>
      <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:border-gray-500 dark:hover:text-gray-200">
        Reports
      </a>
    </div>
  </div>
</nav>

<script>
  // Basic JS for mobile menu toggle (not part of the HTML-only requirement, but for demonstration)
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', () => {
        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
        mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
        mobileMenu.classList.toggle('hidden');

        // Toggle icons
        const menuIcon = mobileMenuButton.querySelector('svg.block');
        const closeIcon = mobileMenuButton.querySelector('svg.hidden');

        if (menuIcon && closeIcon) {
          if (isExpanded) {
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
          } else {
            menuIcon.classList.add('hidden');
            closeIcon.classList.remove('hidden');
          }
        }
      });
    }
  });
</script>

1 ... 36 37 38 39 40 ... 335

Search Components

Categories

All Components

Carousel Slider Component

Neon_Glow_Gaming_Layout

Gaming 3D Purple Lightbox

3D_Education_Form_Component

Bauhaus_Agriculture_Search_Box

Brutalism Add to Cart Button

Heat Maps Component

Tag Cloud Component

Luxury_Sepia_SaaS_Cards_Component

Minimalist CRM Navigation