Search Components

All Components

Browse all available Tailwind CSS components

Two-Factor Authentication Component

A responsive two-factor authentication component with a neon/glow vibrant dark mode aesthetic, suitable for social media applications. Features input fields for numbers, a resend code button, and clear instructions.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-950">
  <div class="relative w-full max-w-md p-8 overflow-hidden rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-indigo-500/20 to-purple-700/20 dark:from-indigo-900/30 dark:to-purple-900/30 shadow-2xl transition-all duration-300 transform scale-95 hover:scale-100 ring-2 ring-purple-500 dark:ring-indigo-700">
    <div class="absolute top-0 -left-4 w-72 h-72 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:bg-purple-700"></div>
    <div class="absolute top-0 -right-4 w-72 h-72 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:bg-indigo-700"></div>
    <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-500 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-center">
      <h2 class="text-4xl font-extrabold mb-4 text-white drop-shadow-[0_0_8px_rgba(168,85,247,0.7)] dark:drop-shadow-[0_0_8px_rgba(129,140,248,0.8)] sm:text-5xl">
        Verify Your Account
      </h2>
      <p class="text-lg mb-8 text-indigo-200 dark:text-indigo-300">
        Enter the 6-digit code sent to your email or phone.
      </p>

      <form class="space-y-6">
        <div class="flex justify-center gap-x-3 sm:gap-x-4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 1">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 2">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 3">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 4">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 5">
          <input type="text" maxlength="1" class="w-12 h-16 sm:w-14 sm:h-20 text-center text-3xl font-bold rounded-xl bg-purple-900/50 text-white border-2 border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-400 focus:border-transparent transition-all duration-200 shadow-md glow-input dark:bg-indigo-900/50 dark:border-indigo-500 dark:focus:ring-indigo-400" aria-label="Digit 6">
        </div>

        <button type="submit" class="w-full py-3 px-6 rounded-lg text-xl font-semibold text-white bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-950 transition-all duration-300 shadow-lg neon-button">
          Verify Code
        </button>

        <p class="text-center text-white/80 dark:text-indigo-300 text-base sm:text-lg mt-4">
          Didn't receive the code?
          <a href="#" class="font-medium text-pink-400 hover:text-pink-300 dark:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 ring-offset-2 ring-offset-gray-100 dark:ring-offset-gray-950 focus:ring-2 focus:ring-pink-400 focus:outline-none rounded-md">
            Resend Code
          </a>
        </p>
      </form>
    </div>
  </div>
</div>

<style>
  /* This is for the custom animation and glow effects */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite;
  }

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

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

  .glow-input {
    box-shadow: 0 0 5px rgba(168, 85, 247, 0.5), inset 0 0 5px rgba(168, 85, 247, 0.5);
  }

  .dark .glow-input {
    box-shadow: 0 0 5px rgba(129, 140, 248, 0.6), inset 0 0 5px rgba(129, 140, 248, 0.6);
  }

  .glow-input:focus {
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.8), inset 0 0 10px rgba(168, 85, 247, 0.8), 0 0 0 4px rgba(168,85,247,0.4);
  }

  .dark .glow-input:focus {
    box-shadow: 0 0 10px rgba(129, 140, 248, 0.9), inset 0 0 10px rgba(129, 140, 248, 0.9), 0 0 0 4px rgba(129,140,248,0.5);
  }

  .neon-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(168,85,247,0.6);
  }

  .neon-button:hover {
    box-shadow: 0 0 25px rgba(168,85,247,0.8), 0 0 40px rgba(168,85,247,0.4);
  }

  .dark .neon-button {
      box-shadow: 0 0 15px rgba(129,140,248,0.7);
  }

  .dark .neon-button:hover {
      box-shadow: 0 0 25px rgba(129,140,248,0.9), 0 0 40px rgba(129,140,248,0.5);
  }
</style>

Memphis_Industrial_Shopping_Cart_Component

A simple, responsive shopping cart component with a Memphis Design influence tailored for industrial/manufacturing contexts, featuring a monochrome palette with a single bright accent color and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md lg:max-w-lg bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden relative border border-gray-200 dark:border-gray-700">

    <!-- Memphis Design Elements (Abstract) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-rose-500 dark:bg-rose-600 opacity-70 transform -translate-x-12 -translate-y-12 rotate-45 z-0"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-gray-700 dark:bg-gray-600 opacity-30 transform translate-x-16 translate-y-16 skew-x-12 z-0"></div>
    <div class="absolute top-1/4 right-0 w-16 h-16 bg-black dark:bg-gray-900 opacity-40 rounded-full z-0"></div>

    <div class="relative z-10 p-5 sm:p-6 lg:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-black dark:text-white mb-6 text-center tracking-tight uppercase">
        Your Order Inquiry
      </h2>

      <!-- Cart Item -->
      <div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
        <div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <img src="https://picsum.photos/id/684/80/80" alt="Industrial Part 1" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-rose-500 opacity-20"></div>
        </div>
        <div class="ml-4 flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">High-Precision Bearing</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Part #ABC-12345</p>
          <div class="flex items-center mt-2">
            <span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$249.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">x 2</span>
          </div>
        </div>
        <button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Cart Item -->
      <div class="flex items-center bg-white dark:bg-gray-900 rounded-lg p-3 sm:p-4 mb-4 shadow border border-gray-200 dark:border-gray-700">
        <div class="flex-shrink-0 w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <img src="https://picsum.photos/id/111/80/80" alt="Industrial Part 2" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-rose-500 opacity-20"></div>
        </div>
        <div class="ml-4 flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-50 mb-1 leading-tight">Heavy-Duty Gearbox</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Part #XYZ-98765</p>
          <div class="flex items-center mt-2">
            <span class="text-md sm:text-lg font-bold text-black dark:text-white mr-2">$1250.00</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">x 1</span>
          </div>
        </div>
        <button aria-label="Remove item" class="ml-auto text-gray-400 hover:text-rose-500 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded-full p-1">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Totals Summary -->
      <div class="border-t-2 border-dashed border-gray-300 dark:border-gray-700 pt-4 mt-6">
        <div class="flex justify-between items-center mb-2">
          <span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Subtotal</span>
          <span class="text-lg font-semibold text-black dark:text-white">$1749.98</span>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="text-md text-gray-700 dark:text-gray-300 uppercase tracking-wide">Taxes & Fees (Est.)</span>
          <span class="text-lg font-semibold text-black dark:text-white">$0.00</span>
        </div>
        <div class="flex justify-between items-center mb-4">
          <span class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase tracking-wide">Estimated Total</span>
          <span class="text-xl sm:text-2xl font-extrabold text-rose-500 dark:text-rose-400">$1749.98</span>
        </div>
      </div>

      <button class="w-full bg-black dark:bg-white text-white dark:text-black py-3 px-6 rounded-lg text-lg font-semibold uppercase tracking-wider transition-all duration-300 ease-in-out hover:bg-rose-500 hover:text-white dark:hover:bg-rose-500 dark:hover:text-white focus:outline-none focus:ring-4 focus:ring-rose-500 dark:focus:ring-rose-400 focus:ring-opacity-50 mt-6 shadow-lg">
        Proceed to Inquiry
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">
        Prices are estimates for industrial clients. Final pricing subject to quote.
      </p>
    </div>
  </div>
</div>

Art Deco Back to Top Button

A complex, Art Deco-inspired 'Back to Top' button component with geometric patterns and luxurious Ocean/Blue tones, designed for non-profit/charity websites. Includes responsive design and dark mode support.

Open Preview

                <div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-8 flex flex-col justify-end items-center font-serif">
  <!-- Simulate scrollable content -->
  <div class="absolute inset-0 overflow-auto z-0">
    <div class="h-[2000px] w-full p-8 text-center text-blue-950 dark:text-gray-100">
      <p class="mb-8 text-3xl font-bold">Scroll down to see the 'Back to Top' button emerge!</p>
      <p class="text-lg leading-relaxed max-w-2xl mx-auto mb-12">
        This area simulates a long page content for a non-profit organization.
        Imagine stories of impact, charity events, and donation appeals.
        Our mission is to bring light to those in need, echoing the profound depths
        and calming expanse of the ocean. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>

  <!-- Back to Top Button Wrapper (hidden by default, would be controlled by JS for scroll threshold) -->
  <div class="fixed bottom-8 right-8 z-50 animate-fade-in-up md:bottom-12 md:right-12 lg:bottom-16 lg:right-16">
    <a href="#top" class="group block w-20 h-20 md:w-24 md:h-24 lg:w-28 lg:h-28 relative overflow-hidden
      bg-gradient-to-br from-blue-400 to-indigo-600 dark:from-blue-700 dark:to-indigo-900
      rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out
      transform hover:scale-105 active:scale-95
      border-4 border-blue-200 dark:border-blue-950">

      <!-- Art Deco Geometric Pattern Overlay -->
      <div class="absolute inset-0 rounded-full overflow-hidden">
        <div class="absolute inset-0 bg-blue-300 opacity-20 dark:bg-blue-900 dark:opacity-30"></div>
        <div class="absolute w-full h-full
          before:content-[''] before:absolute before:inset-0 before:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:before:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.1)_5px,_rgba(0,0,0,0.1)_10px)]
          after:content-[''] after:absolute after:inset-0 after:bg-[repeating-linear-gradient(-45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:after:bg-[repeating-linear-gradient(-45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.1)_5px,_rgba(0,0,0,0.1)_10px)]
          "></div>
        <div class="absolute inset-0 bg-gradient-to-tr from-transparent via-blue-500/20 to-transparent
          dark:via-blue-400/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      </div>

      <!-- Arrow Icon (SVG for crispness) -->
      <svg class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14
        text-white group-hover:text-blue-50 dark:text-gray-100 dark:group-hover:text-amber-200
        transition-colors duration-300 ease-in-out animate-bounce-y
        group-hover:animate-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
      </svg>

      <!-- Subtle border glow effect on hover -->
      <div class="absolute inset-0 rounded-full border-4 border-transparent
        group-hover:border-blue-50 dark:group-hover:border-amber-200
        transition-colors duration-300 opacity-0 group-hover:opacity-100"></div>

      <!-- Decorative elements -->
      <div class="absolute top-2 left-2 w-4 h-4 rounded-full bg-blue-100/30 dark:bg-amber-100/30 blur-sm"></div>
      <div class="absolute bottom-2 right-2 w-3 h-3 rounded-full bg-blue-200/30 dark:bg-amber-200/30 blur-sm"></div>
    </a>
  </div>

  <!-- Keyframes for animation -->
  <style>
    @keyframes fade-in-up {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fade-in-up 0.5s ease-out forwards;
    }
    @keyframes bounce-y {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .animate-bounce-y {
      animation: bounce-y 1.5s infinite;
    }
  </style>
</div>

Luxury/Premium Audio Player

A simple, elegant audio player component designed for forum or community platforms, featuring a luxury/premium style with an autumn color scheme and full responsiveness with dark mode support.

Open Preview

                <div class="max-w-md mx-auto p-4 md:p-6 rounded-xl shadow-xl bg-orange-50 dark:bg-zinc-800 transition-colors duration-300 transform hover:scale-[1.01] ease-in-out">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-md" src="https://picsum.photos/id/1047/100/100" alt="Album Art">
    </div>
    <div class="flex-1 min-w-0">
      <h3 class="text-lg md:text-xl font-serif text-amber-900 dark:text-orange-200 truncate">Autumn Leaves Melody</h3>
      <p class="text-sm md:text-base text-orange-700 dark:text-zinc-400 truncate">by <span class="font-medium">Elegant Soundscapes</span></p>
    </div>
  </div>

  <div class="mt-4">
    <input type="range" class="w-full h-1 bg-amber-200 rounded-lg appearance-none cursor-pointer accent-orange-700 dark:bg-zinc-600 dark:accent-orange-500" value="30" min="0" max="100">
    <div class="flex justify-between text-xs mt-1 text-orange-600 dark:text-zinc-400 font-mono">
      <span>0:30</span>
      <span>3:45</span>
    </div>
  </div>

  <div class="flex justify-center items-center mt-6 space-x-6">
    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Previous Track</span>
    </button>

    <button class="flex items-center justify-center p-3 md:p-4 rounded-full bg-orange-700 text-orange-50 shadow-lg hover:bg-orange-800 dark:bg-orange-600 dark:text-zinc-900 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-7 h-7 md:w-8 md:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L14.81 10.832a1 1 0 000-1.664L9.555 7.168z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Play/Pause</span>
    </button>

    <button class="p-2 md:p-3 rounded-full text-orange-700 dark:text-orange-300 hover:bg-orange-100 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-zinc-800 transition-colors duration-200">
      <svg class="w-6 h-6 md:w-7 md:h-7" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm5.293-9.293a1 1 0 00-1.414 0L10 11.586l-3.293-3.293a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
      <span class="sr-only">Next Track</span>
    </button>
  }

</div>

Bauhaus_Music_Rating_System

A responsive music/audio rating system component with a Bauhaus-inspired design, using a purple/violet color scheme. Includes dark mode support and interactive star rating functionality (visual only, no JS).

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-950 font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transition-colors duration-300 transform border-2 border-purple-300 dark:border-purple-700">
    <h2 class="text-2xl font-bold mb-4 text-purple-800 dark:text-purple-200 text-center uppercase tracking-wider">Rate This Track</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/120/120?random=1" alt="Album Art" class="w-24 h-24 sm:w-32 sm:h-32 rounded-lg object-cover border-2 border-purple-500 dark:border-purple-400 shadow-md">
    </div>

    <div class="text-center mb-6">
      <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">"Cosmic Echoes"</p>
      <p class="text-sm text-gray-600 dark:text-gray-400">AstroFunk Collective</p>
    </div>

    <div class="flex justify-center space-x-2 text-3xl sm:text-4xl text-gray-400 dark:text-gray-600 mb-6">
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="1 star">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="2 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="3 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="4 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="5 stars">
        &#9733;
      </button>
    </div>

    <button class="w-full py-3 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-md shadow-lg transition-colors duration-200 transform focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 uppercase tracking-wide">
      Submit Rating
    </button>
  </div>
</div>

Corporate_Industrial_Footer_Ocean_Blue

A responsive, corporate and industrial-themed footer component with ocean/blue color scheme, designed for manufacturing companies. Includes navigation links, contact info, social media, and copyright, with full dark mode support.

Open Preview

                <footer class="bg-sky-700 text-white dark:bg-gray-950 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">

      <!-- Company Info / Logo -->
      <div class="col-span-1 md:col-span-1">
        <h3 class="text-2xl font-bold mb-4 text-sky-100 dark:text-sky-400">AeroFab Inc.</h3>
        <p class="text-sky-100 dark:text-gray-400 text-sm leading-relaxed mb-4">
          Leading the future of industrial manufacturing through innovation and precision engineering.
        </p>
        <p class="text-sky-100 dark:text-gray-400 text-sm">
          Building tomorrow's industries, today.
        </p>
      </div>

      <!-- Quick Links -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Quick Links</h4>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Our Solutions</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Industries Served</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Case Studies</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Careers</a></li>
          <li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Blog & News</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Contact Us</h4>
        <div class="space-y-3 text-sky-100 dark:text-gray-400 text-sm">
          <p>
            123 Industrial Way<br>
            Tech City, TX 75001<br>
            USA
          </p>
          <p>
            Email: <a href="mailto:[email protected]" class="hover:text-sky-300 transition duration-300">[email protected]</a>
          </p>
          <p>
            Phone: <a href="tel:+1234567890" class="hover:text-sky-300 transition duration-300">+1 (234) 567-890</a>
          </p>
          <p>
            Fax: +1 (234) 567-891
          </p>
        </div>
      </div>

      <!-- Newsletter & Social Media -->
      <div class="col-span-1">
        <h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Stay Connected</h4>
        <p class="text-sky-100 dark:text-gray-400 text-sm mb-4">Subscribe to our newsletter for the latest updates.</p>
        <form class="flex flex-col sm:flex-row gap-2 mb-6">
          <input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-md bg-sky-800 border border-sky-600 text-white placeholder-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-200 dark:focus:ring-sky-500 text-sm">
          <button type="submit" class="bg-sky-500 hover:bg-sky-600 text-white px-5 py-2 rounded-md font-semibold transition duration-300 dark:bg-sky-600 dark:hover:bg-sky-700 text-sm">
            Subscribe
          </button>
        </form>
        <div class="flex space-x-4">
          <a href="#" aria-label="Facebook" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-label="Twitter" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.251c-2.096.166-4.103-.687-5.556-2.18l-.51-.595s4.9-1.928 8-1.57c2.97.337 5.166-.821 5.927-2.36l1.378-2.757-.101-.01c-1.391-.144-2.738-2.09-.766-3.82L20.5 4.3 22 4.3c-.015 2.92-1.306 5.239-3.414 7.02l-1.025.856s-.66-.45-1.527-1.1c-1.284-.967-2.285-2.274-2.868-3.79l.523-1.05s-2.001 1.776-3.078 2.057l-1.12.28s-1.89-1.1-2.903-2.58l.191-.19s-2.92 5.09-2.92 5.09c.677.29 1.579-.9 2.042-1.3l.086.08s-.486 1.13.013 1.96c.49-.69.96-.92 1.341-1.09l.343-2.09s.893.3 1.258.46c.928-.27 1.597-.73 2.158-1.48l-.05.02c.005.006.012.012.019.019.566-.75.766-1.56 1-2.25l-.2-.14s-.2-.16-.3-.3l.04.14s-.5.06-1.05.2c-.44.2-.84.4-1.21.6-.33.1-.6.1-.7.1s-.4-.1-.7-.1c-1.87-1.34-3.1-3.69-3.7-6.22l-1.4 0H4s-.2 1.5.8 2.6c1.65 1.8 1.95 3.5 2.15 4.07l.08.19s-.01.07-.01.12l-.02.04s-.06.27-.06.49c-.06.2-.2.4-.2.4ZM3.109 20.211l-.813-.812c-.524-.523-.972-1.246-1.347-2.09-.38-.85-.689-1.802-.934-2.859-.245-1.057-.42-2.195-.526-3.399-.105-1.204-.158-2.457-.158-3.753 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057-.015-.018-.031-.035-.047-.05ZM5.2 7A1 1 0 014 7.2L3 13.9C2.7 15.6 3.6 17 5 17s2.3-1.4 2.3-3.1L7 7.2A117 117 0 005.2 7zM18.8 7a1 1 0 00-1.2.2L17 13.9c.3 1.7 1.2 3.1 2.6 3.1s2.3-1.4 2.3-3.1L21 7.2A117 117 0 0118.8 7z" />
            </svg>
          </a>
          <a href="#" aria-label="LinkedIn" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-label="YouTube" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M19.8 4.3c.09-1.07.72-1.93 1.7-2.3C21.8 1.9 23 2.1 24 2.6l-1 2.4c-.09.3-.12.6-.09 1c.09 1.07.72 1.93 1.7 2.3C23.6 8.5 24 7.6 24 6.8c0-.6-.3-.9-1-1.3-.8-.3-1.6-.2-2.3 0-.7.3-1.2.9-1.4 1.7-.2.7-.2 1.5-.1 2.3.1.8.4 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7c-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09z" clip-rule="evenodd" />
            </svg>
          </a>
        </div>
      </div>
    </div>

    <!-- Divider -->
    <hr class="my-8 border-sky-600 dark:border-gray-700">

    <!-- Copyright / Bottom Text -->
    <div class="text-center text-sky-100 dark:text-gray-400 text-sm">
      &copy; 2023 AeroFab Inc. All rights reserved. | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Privacy Policy</a> | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Terms of Service</a>
    </div>
  </div>
</footer>

Luxury_Premium_Sweet_Dashboard_Auth_Component

A complex, luxury/premium style authentication component for a dashboard, featuring a sweet color palette with bubblegum pink and mint green, and full responsiveness with dark mode support.

Open Preview

                <div class="min-h-screen p-4 flex items-center justify-center bg-gradient-to-br from-pink-100 to-green-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden grid grid-cols-1 lg:grid-cols-2 transform hover:scale-[1.01] transition-all duration-300 ease-in-out">
    <!-- Left Panel: Brand & Imagery -->
    <div class="relative p-8 lg:p-12 hidden lg:flex flex-col justify-between items-center bg-pink-300 dark:bg-gray-950 text-white dark:text-gray-100 overflow-hidden rounded-l-3xl">
      <div class="absolute inset-0 bg-gradient-to-br from-pink-400 to-green-400 opacity-60 dark:opacity-40 rounded-l-3xl"></div>
      <div class="relative z-10 text-center flex flex-col justify-between items-center h-full">
        <h1 class="text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 drop-shadow-lg font-serif">
          SweetMetrics
        </h1>
        <p class="text-lg lg:text-xl font-light leading-relaxed mb-8">
          Your Dashboard to a Sweeter Future. Unlock insights with elegance.
        </p>
        <img src="https://picsum.photos/400/300?random=1" alt="Dashboard illustration" class="w-full max-w-sm rounded-lg object-cover shadow-lg transform -rotate-3 hover:rotate-0 transition-transform duration-300 ease-in-out">
        <div class="mt-8 text-sm opacity-80">
          © 2023 All Rights Reserved.
        </div>
      </div>
    </div>

    <!-- Right Panel: Authentication Forms -->
    <div class="flex flex-col p-8 sm:p-10 lg:p-12 space-y-8 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
      <div class="text-center">
        <h2 class="text-3xl lg:text-4xl font-bold mb-2 font-serif">Welcome Back!</h2>
        <p class="text-md text-gray-500 dark:text-gray-400">Sign in to continue to your dashboard.</p>
      </div>

      <!-- Tabs for Login/Register -->
      <div class="flex justify-center mb-6">
        <button class="px-6 py-3 rounded-full text-lg font-semibold bg-pink-200 dark:bg-pink-700 text-pink-800 dark:text-white shadow-md transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600 mr-2">
          Login
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 shadow-sm transform hover:scale-105 transition-all duration-200 ease-in-out focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
          Register
        </button>
      </div>

      <!-- Login Form -->
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
          <div class="relative">
            <input type="email" id="email" name="email" autocomplete="email" required class="w-full px-5 py-3 border border-pink-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent outline-none bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-colors duration-200 ease-in-out pl-12">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-pink-400 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path></svg>
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
          <div class="relative">
            <input type="password" id="password" name="password" autocomplete="current-password" required class="w-full px-5 py-3 border border-pink-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:border-transparent outline-none bg-pink-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 transition-colors duration-200 ease-in-out pl-12">
            <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-pink-400 dark:text-gray-400" width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"></path></svg>
          </div>
        </div>

        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-pink-600 border-gray-300 rounded focus:ring-pink-500 dark:bg-gray-600 dark:border-gray-500 dark:checked:bg-pink-600">
            <label for="remember-me" class="ml-2 block text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-200 ease-in-out">
            Forgot your password?
          </a>
        </div>

        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-lg font-bold text-white bg-green-400 hover:bg-green-500 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500 transition-all duration-300 ease-in-out transform hover:-translate-y-1">
          Sign In
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </button>
      </form>

      <div class="relative flex flex-col justify-center text-center text-xs text-gray-500 dark:text-gray-400 uppercase">
        <span class="block w-full border-t border-gray-200 dark:border-gray-600 absolute top-1/2 left-0 right-0 z-0"></span>
        <span class="relative z-10 bg-white dark:bg-gray-800 px-4 inline-block mx-auto">Or continue with</span>
      </div>
      
      <!-- Social Logins -->
      <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
        <button class="flex items-center justify-center w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition-transform duration-200 ease-in-out">
          <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.0003 12.72L16.2903 16.03C15.2203 18.01 13.0603 19.33 10.5303 19.33C6.73031 19.33 3.50031 16.32 3.50031 12.00C3.50031 7.68 6.73031 4.67 10.5303 4.67C12.5903 4.67 14.1903 5.37 15.4203 6.46L18.4203 3.42C16.4803 1.5 13.7903 0.330002 10.5303 0.330002C4.78031 0.330002 0.0003125 5.11 0.0003125 10.86C0.0003125 16.61 4.78031 21.39 10.5303 21.39C16.0703 21.39 20.0003 17.51 20.0003 11.23C20.0003 10.45 19.9303 9.71 19.8103 9H10.5303V12.72Z"></path></svg>
          Google
        </button>
        <button class="flex items-center justify-center w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition-transform duration-200 ease-in-out">
          <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0298 5.7291 21.1278 10.5 21.8906V14.125H7.5V12H10.5V10C10.5 7.97125 11.8364 6.2235 14.5 6.2235C15.3411 6.2235 16.1952 6.34734 17 6.47167V9H15C13.6738 9 13.5 9.68062 13.5 10.5V12H16.5L16 14.125H13.5V21.8906C18.2709 21.1278 22 17.0298 22 12Z"></path></svg>
          Facebook
        </button>
      </div>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-pink-600 dark:text-pink-400 hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-200 ease-in-out">Sign up now</a>.
      </p>
    </div>
  </div>
</div>

Neumorphic_Industrial_Sitemap

A responsive neumorphic site map component for industrial and manufacturing companies, featuring a monochromatic color scheme and dark mode support. Elements appear to extrude from the background using subtle shadows.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans transition-colors duration-300">
  <div class="container mx-auto p-6 rounded-3xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl bg-gray-200 dark:bg-gray-800 transition-all duration-300 max-w-7xl relative">

    <!-- Title -->
    <h2 class="text-4xl md:text-5xl font-bold text-gray-700 dark:text-gray-300 mb-10 text-center relative tracking-wide drop-shadow-md pb-4">
      Industrial Site Map
      <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-24 h-1 rounded-full bg-gray-400 dark:bg-gray-600 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark"></span>
    </h2>

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

      <!-- Column 1: Company -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">About Us</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Our Mission</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Leadership</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Careers</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">News & Press</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Products & Services</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Automation Systems</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Robotics Solutions</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Industrial IoT</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Consulting & Design</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Support & Maintenance</a></li>
        </ul>
      </div>

      <!-- Column 3: Industries -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Industries Served</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Automotive</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Electronics</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Pharmaceutical</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Food & Beverage</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Heavy Machinery</a></li>
        </ul>
      </div>

      <!-- Column 4: Resources & Contact -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Resources & Contact</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Blog</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Case Studies</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Downloads</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">FAQ</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Contact Us</a></li>
        </ul>
      </div>

    </div>

    <!-- Placeholder for an industrial icon/logo (e.g., gear) mimicking neumorphic style -->
    <div class="absolute bottom-8 right-8 w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light-inverse dark:shadow-neumorphic-dark-inverse flex items-center justify-center pointer-events-none opacity-80">
        <!-- Tailwind doesn't have native icon support, so this is a conceptual placeholder. An SVG would go here. -->
        <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 1L9 5H3L1 11L6 18H18L23 11L21 5H15L12 1ZM12 4.09L13.88 7H10.12L12 4.09ZM5.6 9L7.2 6H16.8L18.4 9H5.6ZM15 15H9V12H15V15ZM6.5 16H17.5L15.5 19H8.5L6.5 16Z"></path>
        </svg>
    </div>

  </div>
</div>

<style>
  /* Base styles for neumorphism shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #3c4046, -6px -6px 12px #26292c;
  }

  .shadow-neumorphic-light-xl {
    box-shadow: 20px 20px 40px #a3b1c6, -20px -20px 40px #ffffff;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 20px 20px 40px #3c4046, -20px -20px 40px #26292c;
  }

  /* Inner shadow for active/pressed state */
  .active\:shadow-inner-neumorphic-light:active {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .active\:shadow-inner-neumorphic-dark:active {
    box-shadow: inset 2px 2px 5px #3c4046, inset -2px -2px 5px #26292c;
  }

  /* Inverse shadow for the bottom right element */
  .shadow-neumorphic-light-inverse {
    box-shadow: -6px -6px 12px #a3b1c6, 6px 6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark-inverse {
    box-shadow: -6px -6px 12px #3c4046, 6px 6px 12px #26292c;
  }

  /* Custom shadow for the title underline for a subtle recessed look */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 2px 2px 3px #a3b1c6, inset -2px -2px 3px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 2px 2px 3px #3c4046, inset -2px -2px 3px #26292c;
  }
</style>

3D_Business_Buttons_Component

A responsive set of 3D-styled business buttons with a warm sunset color scheme, suitable for corporate websites. Includes dark mode support and interactive hover effects.

Open Preview

                <div class="p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-orange-600 to-red-800 dark:from-orange-400 dark:to-red-600 drop-shadow-md">
      Elevate Your Business
    </h2>

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

      <!-- Button 1: Learn More -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-orange-400 to-red-600 dark:from-orange-600 dark:to-red-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-orange-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-orange-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-orange-200 after:to-red-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-300">&#x1F4A1;</span>
            </p>
            <h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
              Learn More
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Dive deep into our offerings and discover how we can help your business thrive.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(234,88,12,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Explore Now
            </span>
          </div>
        </div>
      </a>

      <!-- Button 2: Get Started -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-yellow-400 to-orange-600 dark:from-yellow-600 dark:to-orange-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-yellow-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-yellow-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-yellow-200 after:to-orange-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-orange-600 dark:text-orange-400 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:-rotate-6 transition-transform duration-300">&#x1F680;</span>
            </p>
            <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-400 mb-2 group-hover:text-red-700 dark:group-hover:text-red-300 transition-colors duration-300">
              Get Started
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Begin your journey with us today. It's quick, easy, and rewarding.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(245,158,11,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Sign Up Now
            </span>
          </div>
        </div>
      </a>

      <!-- Button 3: Contact Us -->
      <a href="#" class="group block w-full">
        <div class="relative p-1 rounded-2xl shadow-xl transition-all duration-300 border border-orange-100 dark:border-gray-700
                    hover:scale-[1.02] hover:shadow-2xl active:scale-[0.98]
                    bg-gradient-to-br from-red-400 to-yellow-600 dark:from-red-600 dark:to-yellow-800
                    transform -translate-y-1 group-hover:-translate-y-2 group-active:-translate-y-0.5">
          <div class="absolute inset-0 bg-transparent rounded-2xl group-hover:bg-black group-hover:bg-opacity-5 transition-all duration-300"></div>
          <div class="relative z-10 px-8 py-10 text-center rounded-xl bg-red-50 dark:bg-gray-800
                      transform translate-z-10 group-hover:bg-red-100 dark:group-hover:bg-gray-900
                      transition-all duration-300 overflow-hidden
                      after:content-[''] after:absolute after:inset-0 after:rounded-xl after:bg-gradient-to-br
                      after:from-red-200 after:to-yellow-300 after:dark:from-gray-700 after:dark:to-gray-900
                      after:opacity-0 group-hover:after:opacity-100 group-hover:after:brightness-125 group-active:after:opacity-75
                      after:transition-all after:duration-300 after:mix-blend-overlay">
            <p class="text-5xl mb-4 text-red-600 dark:text-red-400 group-hover:text-orange-700 dark:group-hover:text-orange-500 transition-colors duration-300">
              <span class="block transform group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300">&#x1F4DE;</span>
            </p>
            <h3 class="text-2xl font-bold text-red-800 dark:text-red-400 mb-2 group-hover:text-orange-700 dark:group-hover:text-orange-300 transition-colors duration-300">
              Contact Us
            </h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
              Have questions? Reach out to our team. We're here to help you.
            </p>
            <span class="mt-6 inline-flex px-6 py-3 rounded-full bg-orange-600 text-white font-semibold shadow-md
                         group-hover:bg-red-700 group-active:bg-orange-700 transition-all duration-300
                         transform group-hover:scale-105 group-active:scale-95
                         shadow-[0_4px_15px_rgba(239,68,68,0.4)] group-hover:shadow-[0_6px_20px_rgba(220,38,38,0.5)]">
              Get in Touch
            </span>
          </div>
        </div>
      </a>

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

Organic_Nature_Inspired_Food_Loader

A moderate complexity loader component for food/restaurant websites, featuring an organic, nature-inspired design with muted colors and full responsiveness, including dark mode support.

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-sm rounded-2xl overflow-hidden shadow-xl bg-white dark:bg-gray-800 p-6 sm:p-8 border border-gray-200 dark:border-gray-700 relative">

    <!-- Background organic shapes - visible on larger screens -->
    <div class="absolute inset-0 overflow-hidden opacity-10 dark:opacity-5">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-emerald-300 dark:bg-emerald-600 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-blob-slow animation-delay-2000"></div>
      <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-amber-200 dark:bg-amber-700 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-blob-slow"></div>
      <div class="absolute top-1/2 left-1/4 -translate-x-1/2 w-40 h-40 bg-pink-200 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-60 animate-blob-slow animation-delay-4000"></div>
    </div>

    <h2 class="text-2xl sm:text-3xl font-semibold text-center text-gray-800 dark:text-gray-100 mb-6 relative z-10">
      Preparing Your Order
    </h2>

    <div class="flex flex-col items-center space-y-6 relative z-10">

      <!-- Main Loader Animation: "Leaf" or "Petal" style bounce -->
      <div class="relative flex w-24 h-24 sm:w-32 sm:h-32 justify-center items-center rounded-full bg-gradient-to-br from-emerald-100 to-emerald-300 dark:from-emerald-700 dark:to-emerald-900 shadow-inner overflow-hidden">
        <div class="w-16 h-16 sm:w-20 sm:h-20 bg-emerald-500 dark:bg-emerald-600 rounded-full animate-pulse-scale-delay opacity-90"></div>
        <svg class="absolute w-20 h-20 sm:w-24 sm:h-24 text-white dark:text-gray-200 animate-leaf-spin" fill="currentColor" viewBox="0 0 24 24">
          <path d="M17 6c-2.76 0-5 2.24-5 5S14.24 16 17 16s5-2.24 5-5-2.24-5-5-5zm-1 9c-.55 0-1-.45-1-1v-4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55-.45 1-1 1s-1-.45-1-1V5c0-.55-.45-1-1-1H7C4.79 4 3 5.79 3 8c0 .87.25 1.69.7 2.4l7.9 7.9c.71.71 1.63 1.1 2.6 1.1s1.89-.39 2.6-1.1c.71-.71 1.1-1.63 1.1-2.6S17.71 16.39 17 15.69V15c-.55 0-1-.45-1-1s-.45-1-1-1c0-.55-.45-1-1-1zm-4-6.3L6.7 8.3c-.39.39-.63.92-.63 1.48C6.07 10.3 6.4 11 7 11h4c.55 0 1-.45 1-1s-.45-1-1-1z"/>
        </svg>
      </div>

      <!-- Progress Bar (simulated) -->
      <div class="w-full h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
        <div class="h-full bg-amber-400 dark:bg-amber-500 rounded-full animate-progress-grow origin-left"></div>
      </div>

      <!-- Status Text -->
      <p class="text-sm text-gray-600 dark:text-gray-300 animate-fade-in-shimmer animation-delay-500">
        Gathering fresh ingredients...
      </p>

    </div>

  </div>

  <!-- Tailwind JIT classes for keyframes (normally in a CSS file or via PostCSS) -->
  <style>
    @keyframes blob-slow {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30%, -20%) scale(1.1); }
      66% { transform: translate(-20%, 30%) scale(0.9); }
    }
    @keyframes pulse-scale-delay {
      0%, 100% { transform: scale(1); opacity: 0.9; }
      50% { transform: scale(1.15); opacity: 0.7; }
    }
    @keyframes leaf-spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes progress-grow {
      0% { width: 0%; }
      100% { width: 100%; }
    }
    @keyframes fade-in-shimmer {
      0% { opacity: 0; transform: translateY(10px); filter: brightness(1); }
      50% { opacity: 1; transform: translateY(0px); filter: brightness(1.2); }
      100% { opacity: 1; transform: translateY(0px); filter: brightness(1); }
    }
    .animate-blob-slow { animation: blob-slow 15s infinite ease-in-out; }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
    .animate-pulse-scale-delay { animation: pulse-scale-delay 2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
    .animate-leaf-spin { animation: leaf-spin 4s linear infinite; }
    .animate-progress-grow { animation: progress-grow 10s forwards linear; }
    .animate-fade-in-shimmer { animation: fade-in-shimmer 2s infinite ease-in-out; }
    .animation-delay-500 { animation-delay: 0.5s; }
  </style>

</div>

1 ... 38 39 40 41 42 ... 335

Search Components

Categories

All Components