Search Components

All Components

Browse all available Tailwind CSS components

Product Comparison Component - Neumorphism Monochromatic

A responsive product comparison component with a neumorphic design style and a monochromatic color scheme, suitable for event/conference websites. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-200 p-4 dark:bg-gray-800 flex items-center justify-center font-sans">

  <div class="container mx-auto p-4 md:p-8 rounded-3xl shadow-xl dark:shadow-xl-dark bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">

    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight leading-tight transition-colors duration-300">
      Choose Your <span class="text-purple-600 dark:text-purple-400">Event Pass</span>
    </h2>

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

      <!-- Plan 1: Basic Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Standard Access</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Ideal for basic conference attendance and networking.</p>

          <div class="text-4xl font-extrabold mb-8">
            $99<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" 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>
              Workshop Access
            </li>
            <li class="flex items-center line-through text-gray-500 dark:text-gray-500">
              <svg class="w-6 h-6 text-red-500 mr-2" 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>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Standard Pass
        </button>
      </div>

      <!-- Plan 2: Premium Pass (Recommended) -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover relative border-2 border-purple-500 dark:border-purple-400">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-purple-500 dark:bg-purple-400 text-white text-sm font-bold rounded-full shadow-md">
          Recommended
        </div>
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">VIP Experience</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Full access to all event features and exclusive content.</p>

          <div class="text-4xl font-extrabold mb-8">
            $249<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/pass</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Access to Main Sessions
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Networking Opportunities
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Full Workshop Access
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Exclusive Q&A Sessions
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get VIP Pass
        </button>
      </div>

      <!-- Plan 3: Enterprise Pass -->
      <div class="flex flex-col p-6 rounded-3xl bg-gray-200 dark:bg-gray-700 shadow-neumorphic dark:shadow-neumorphic-dark transition-all duration-300 hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">
        <div class="flex-grow">
          <h3 class="text-2xl font-bold mb-4 text-purple-700 dark:text-purple-300">Team Bundle</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-6">Designed for teams, with additional benefits and support.</p>

          <div class="text-4xl font-extrabold mb-8">
            $499<span class="text-lg font-medium text-gray-500 dark:text-gray-400">/5 passes</span>
          </div>

          <ul class="list-none space-y-4 mb-8 text-gray-700 dark:text-gray-300">
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              All VIP Pass Features
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              5 Team Members Included
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Dedicated Support
            </li>
            <li class="flex items-center">
              <svg class="w-6 h-6 text-green-500 mr-2" 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="M5 13l4 4L19 7"></path></svg>
              Private Networking Lounge Access
            </li>
          </ul>
        </div>
        <button class="w-full py-3 px-6 bg-purple-600 dark:bg-purple-500 hover:bg-purple-700 text-white rounded-xl shadow-neumorphic-button dark:shadow-neumorphic-button-dark hover:shadow-neumorphic-button-hover dark:hover:shadow-neumorphic-button-dark-hover transition-all duration-300 font-semibold focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Get Team Bundle
        </button>
      </div>

    </div>
  </div>

  <!-- Tailwind JIT custom styles for neumorphism shadows (typically in tailwind.config.js) -->
  <style>
    .shadow-xl {
      box-shadow: 10px 10px 20px rgba(174, 174, 192, .4), -10px -10px 20px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-xl-dark {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, .4), -10px -10px 20px rgba(120, 120, 120, .2);
    }
    .shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(174, 174, 192, .4), -8px -8px 16px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic {
      box-shadow: 8px 8px 16px rgba(0, 0, 0, .4), -8px -8px 16px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: 4px 4px 8px rgba(174, 174, 192, .4), -4px -4px 8px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: 4px 4px 8px rgba(0, 0, 0, .4), -4px -4px 8px rgba(120, 120, 120, .2);
    }

    .shadow-neumorphic-button {
      box-shadow: 3px 3px 6px rgba(174, 174, 192, .4), -3px -3px 6px rgba(255, 255, 255, 1);
    }
    .dark\:shadow-neumorphic-button-dark {
      box-shadow: 3px 3px 6px rgba(0, 0, 0, .4), -3px -3px 6px rgba(120, 120, 120, .2);
    }
    .hover\:shadow-neumorphic-button-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(174, 174, 192, .4), inset -3px -3px 7px rgba(255, 255, 255, 1);
    }
    .dark\:hover\:shadow-neumorphic-button-dark-hover:hover {
      box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .6), inset -3px -3px 7px rgba(120, 120, 120, .3);
    }
  </style>

</div>

Industrial_Vibrant_Dating_Accordion

A moderately complex, industrial-style accordion component with vibrant colors, suitable for dating and social platforms. Features exposed elements, heavy typography, and full responsiveness with dark mode support.

Open Preview

                <div class="max-w-4xl mx-auto p-4 sm:p-6 lg:p-8 font-sans bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">

  <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-tight text-red-600 dark:text-red-500 uppercase leading-snug">
    <span class="block">Unlock Deep</span> Connections
  </h2>

  <div class="space-y-6 md:space-y-8">

    <!-- Accordion Item 1 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-1" class="hidden peer" />
      <label for="accordion-1" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-red-600 to-amber-500 dark:from-red-700 dark:to-orange-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-red-800 dark:border-red-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          Who Are You Looking For?
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-green-500 dark:peer-checked:border-green-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          Define your ideal partner. Our intelligent matching algorithm goes beyond just looks, connecting you with individuals who share your passions, values, and life goals. Get specific about what truly matters.
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Profile 1" class="w-12 h-12 rounded-full mr-4 border-2 border-red-500 dark:border-red-400 object-cover">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Adventure Seeker</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Loves hiking & travel.</p>
            </div>
          </div>
          <div class="flex items-center p-3 bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Profile 2" class="w-12 h-12 rounded-full mr-4 border-2 border-blue-500 dark:border-blue-400 object-cover">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200">Creative Soul</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Passionate about art & music.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-2" class="hidden peer" />
      <label for="accordion-2" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-blue-800 dark:border-blue-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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="M7 8h10M7 12h10m-9 4h4M4 16v-4a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2z"></path>
          </svg>
          How Does Matching Work?
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-red-500 dark:peer-checked:border-red-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          <span>Our proprietary algorithm uses a combination of personality assessments, shared interests, and behavioral data to suggest highly compatible matches. It's designed to foster genuine connections.</span>
        </p>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <img src="https://picsum.photos/300/200?random=1" alt="Matchmaking Process 1" class="w-full h-32 object-cover rounded-md border-2 border-blue-400 dark:border-blue-500 shadow-md">
          <img src="https://picsum.photos/300/200?random=2" alt="Matchmaking Process 2" class="w-full h-32 object-cover rounded-md border-2 border-green-400 dark:border-green-500 shadow-md">
          <img src="https://picsum.photos/300/200?random=3" alt="Matchmaking Process 3" class="w-full h-32 object-cover rounded-md border-2 border-purple-400 dark:border-purple-500 shadow-md">
        </div>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div class="group bg-white dark:bg-gray-800 border-4 border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <input type="checkbox" id="accordion-3" class="hidden peer" />
      <label for="accordion-3" class="flex items-center justify-between p-5 cursor-pointer bg-gradient-to-r from-green-600 to-lime-500 dark:from-green-700 dark:to-lime-600 text-white font-bold text-xl sm:text-2xl uppercase tracking-wide border-b-4 border-green-800 dark:border-green-900 hover:opacity-90 transition-opacity duration-200">
        <span class="flex items-center">
          <svg class="w-8 h-8 sm:w-10 sm:h-10 mr-4" 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 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M7 20v-2m3-2H7m4-10v4m-4-4V9m-2-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V9a2 2 0 012-2zm0 0V5a2 2 0 012-2h4a2 2 0 012 2v2m0 0H9"></path>
          </svg>
          Safety & Privacy Measures
        </span>
        <span class="transform rotate-0 peer-checked:rotate-180 transition-transform duration-300 text-3xl">&#x2b;</span>
      </label>
      <div class="max-h-0 peer-checked:max-h-screen overflow-hidden transition-all duration-500 ease-in-out p-0 peer-checked:p-6 sm:peer-checked:p-8 md:peer-checked:p-10 border-t-4 border-gray-300 dark:border-gray-700 peer-checked:border-orange-500 dark:peer-checked:border-orange-600">
        <p class="text-md sm:text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
          Your safety is our priority. We employ robust security protocols and strict privacy policies to ensure a secure and respectful environment for all users. Report any suspicious activity immediately.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 text-md sm:text-lg">
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Encrypted Communication</li>
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Profile Verification</li>
          <li class="flex items-center"><span class="text-green-500 dark:text-green-400 text-xl mr-2">&#10003;</span> Anti-Scam Technology</li>
        </ul>
      </div>
    </div>

  </div>

</div>

Retro_Rainbow_Buttons_Component

A collection of retro-themed gradient rainbow buttons designed for photography galleries and portfolios, with moderate complexity and full responsiveness and dark mode support.

Open Preview

                <div class="p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-2xl transition-colors duration-300">
    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-10 tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-400 dark:via-pink-300 dark:to-red-300 drop-shadow-lg">
      Capture the Moment
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8 justify-items-center">

      <!-- Button 1: Classic Retro -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-br from-yellow-400 via-orange-500 to-red-600 
                     text-white font-bold uppercase tracking-wider text-lg 
                     transition-all duration-300 
                     transform hover:-translate-y-1 hover:scale-105 
                     focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-500/50">
        <span class="absolute inset-0 border-4 border-white dark:border-gray-900 rounded-lg group-hover:rotate-6 group-hover:scale-110 transition-transform duration-300"></span>
        <span class="relative z-10">View Gallery</span>
      </button>

      <!-- Button 2: Striped Retro -->
      <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-b from-blue-500 via-purple-600 to-pink-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     transition-all duration-300 
                     transform hover:-skew-x-6 hover:scale-105 
                     focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-500/50">
        <span class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/30 to-transparent 
                     w-full h-full rotate-45 transform -translate-x-full 
                     group-hover:translate-x-full transition-transform duration-700"></span>
        <span class="relative z-10">Portfolio</span>
      </button>

      <!-- Button 3: Gradient Border -->
      <button class="relative group px-7 py-3 rounded-lg 
                     bg-gray-200 dark:bg-gray-700 
                     text-gray-800 dark:text-gray-200 
                     font-bold uppercase tracking-wide text-lg 
                     transition-all duration-300 
                     transform hover:scale-105 hover:shadow-xl 
                     focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-500/50">
        <div class="absolute inset-0.5 rounded-md bg-white dark:bg-gray-800"></div>
        <div class="absolute inset-0.5 rounded-md bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 
                    animate-pulse group-hover:animate-none 
                    opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
        <span class="relative z-10">My Work</span>
      </button>

      <!-- Button 4: Neon Glow Effect -->
      <button class="relative group px-8 py-3 rounded-lg shadow-lg 
                     bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     transition-all duration-300 
                     transform hover:translate-y-px hover:shadow-2xl 
                     focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-500/50">
        <span class="absolute inset-0.5 rounded-lg 
                     bg-gradient-to-br from-red-500 via-orange-500 to-yellow-500 
                     filter blur-md opacity-75 group-hover:opacity-100 transition-opacity duration-300"></span>
        <span class="relative z-10 
                     drop-shadow-[0_0_5px_rgba(255,255,255,0.7)] group-hover:drop-shadow-[0_0_10px_rgba(255,255,255,1)] transition-all duration-300">About Me</span>
      </button>

      <!-- Button 5: Square Pixelated -->
      <button class="relative group overflow-hidden px-8 py-3 
                     bg-gradient-to-br from-teal-400 via-lime-500 to-yellow-500 
                     text-white font-bold uppercase tracking-wider text-lg 
                     shadow-lg transform transition-all duration-300 
                     hover:-translate-x-1 hover:-translate-y-1 
                     active:translate-x-0 active:translate-y-0 
                     focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-500/50" 
              style="clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);">
        <span class="absolute inset-0 bg-black/10 dark:bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"></span>
        <span class="relative z-10 drop-shadow-md">Contact</span>
      </button>

      <!-- Button 6: Multi-layered 3D -->
      <button class="relative group px-8 py-3 
                     bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 
                     text-white font-bold uppercase tracking-wider text-base 
                     shadow-[5px_5px_0_0_rgba(0,0,0,0.2)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,0.1)] 
                     transition-all duration-300 transform 
                     hover:-translate-x-1 hover:-translate-y-1 
                     hover:shadow-[7px_7px_0_0_rgba(0,0,0,0.3)] dark:hover:shadow-[7px_7px_0_0_rgba(255,255,255,0.15)] 
                     focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-500/50">
        <span class="relative z-10">Services</span>
        <span class="absolute inset-0 border-2 border-white dark:border-gray-900 -translate-x-1 -translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></span>
      </button>

    </div>

    <div class="mt-16 text-center text-gray-600 dark:text-gray-400 text-sm md:text-base">
      <p>Explore my photography journey, one click at a time.</p>
      <p class="mt-2">© <span id="current-year"></span> Your Photography Name. All rights reserved.</p>
    </div>

  </div>
</div>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Playful_Booking_Media_Component

A simple, playful, and responsive media component for booking/reservation systems, featuring a triadic color scheme, rounded elements, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-50 dark:bg-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-rose-400 dark:border-rose-600">
    <div class="relative bg-rose-200 dark:bg-rose-700 h-40 overflow-hidden flex items-center justify-center p-4">
      <img src="https://picsum.photos/400/250?random=1" alt="Booking header image" class="absolute inset-0 w-full h-full object-cover rounded-t-3xl opacity-80">
      <div class="absolute inset-0 bg-gradient-to-t from-rose-400/80 to-rose-200/50 dark:from-rose-800/80 dark:to-rose-700/50"></div>
      <h2 class="relative text-center text-3xl sm:text-4xl font-extrabold text-white dark:text-gray-100 drop-shadow-lg leading-tight p-2">
        Ready to Book Your Spot?
      </h2>
    </div>

    <div class="p-6 sm:p-8 space-y-6 text-center">
      <div class="flex justify-center -mt-16 mb-4">
        <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-yellow-300 dark:border-yellow-500 shadow-lg object-cover" src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Service Provider Avatar">
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 text-lg sm:text-xl font-semibold mb-4">
        Hello! I'm <span class="text-rose-500 dark:text-rose-400">Alex</span>,<br>your friendly service provider.
      </p>

      <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg leading-relaxed">
        Let's find the perfect time for your appointment. It's super easy!
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-4 pt-4">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
          Book Now
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border-2 border-yellow-400 dark:border-yellow-600 text-base font-medium rounded-full text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-gray-800 transition-colors duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
          <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5L14.5 9l1.5-1.5L18 11.5V14a2 2 0 01-2 2H8a2 2 0 01-2-2V6c0-1.1.9-2 2-2h3.28a1 1 0 01.948.684L10.5 9z" />
          </svg>
          Learn More
        </a>
      </div>
    </div>
  </div>
</div>

Forms Component

A simple, minimalist form component designed with Swiss/International Typography principles, using a muted color scheme suitable for documentation or wiki sites. It is fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-850 shadow-md rounded-lg overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Contact Us</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">We'd love to hear from you. Please fill out the form below.</p>
    </div>
    <form class="px-6 py-6 space-y-5">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
        <div class="mt-1">
          <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required placeholder="[email protected]" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Subject</label>
        <div class="mt-1">
          <input type="text" name="subject" id="subject" placeholder="Inquiry about a topic" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm">
        </div>
      </div>

      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Your Message</label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="5" placeholder="Type your message here..." class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-400 dark:focus:border-gray-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-white sm:text-sm"></textarea>
        </div>
      </div>

      <div class="pt-2">
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Social Media Interactive Component

A complex social media component featuring a forest/green color palette with neon/glow effects, suitable for interactive feeds with multiple elements. Includes responsive design and dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-black p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.005] transition-all duration-300 border border-green-200 dark:border-green-800 relative">
    
    <!-- Glowing Border Effect for Dark Mode -->
    <div class="absolute inset-0 rounded-xl pointer-events-none dark:animate-pulse-light dark:border-4 dark:border-green-500 dark:shadow-[0_0_15px_rgba(34,197,94,0.7),inset_0_0_10px_rgba(34,197,94,0.5)] transition-all duration-300"></div>

    <!-- Header -->
    <div class="relative flex items-center justify-between p-4 sm:p-6 bg-gradient-to-r from-green-500 to-emerald-600 dark:from-green-700 dark:to-emerald-900 border-b border-green-400 dark:border-green-700 backdrop-blur-sm shadow-md">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight relative">
        Social Feed
        <span class="absolute -bottom-1 left-0 w-full h-1 bg-white dark:bg-green-300 rounded-full animate-pulse-line"></span>
      </h1>
      <div class="relative inline-flex flex-col items-end">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white dark:border-green-300 shadow-lg glow-shadow-sm transition-transform hover:scale-110">
        <span class="block text-xs text-white mt-1 sm:mt-2 font-semibold glow-text-sm dark:text-green-200">@glowing_user</span>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="p-4 sm:p-6 lg:p-8 space-y-8">

      <!-- Post 1 -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-lg border border-green-200 dark:border-green-600 relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:dark:shadow-[0_0_20px_rgba(34,197,94,0.6)] group">
        <div class="absolute inset-0 bg-gradient-to-r from-green-300/20 to-lime-300/20 dark:from-green-600/20 dark:to-lime-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="flex items-start mb-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile picture of Jane Doe" class="w-12 h-12 rounded-full mr-3 border-2 border-green-400 dark:border-green-500 shadow-md glow-shadow-xs">
          <div>
            <p class="text-lg font-semibold text-green-800 dark:text-green-300">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@janedoe • 2 hours ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4 relative z-10">
          Absolutely loving the new update! So many exciting features to explore. What's your favorite part?
        </p>
        <img src="https://picsum.photos/600/400?random=1" alt="Placeholder image for post" class="w-full rounded-md object-cover h-48 sm:h-64 mb-4 border border-green-300 dark:border-green-600 shadow-md transform hover:scale-[1.01] transition-transform duration-300 relative z-10">

        <!-- Interactive Buttons -->
        <div class="flex justify-around items-center border-t border-green-200 dark:border-green-700 pt-4 relative z-10">
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            <span class="text-sm font-medium">1.2K</span>
            <span class="absolute inset-0 bg-green-500/20 dark:bg-green-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(34,197,94,0.7)]"></span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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>
            <span class="text-sm font-medium">345</span>
            <span class="absolute inset-0 bg-blue-500/20 dark:bg-blue-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(59,130,246,0.7)]"></span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-purple-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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.684 13.342C8.882 14.2 9.872 15 11 15c1.128 0 2.118-.8 2.316-1.658M11 20v-5m0 0a2 2 0 11-2-2h4a2 2 0 11-2 2zM15 4c-5.82 2.89-8.48 7.39-10 12h14c-1.52-4.61-4.18-9.11-10-12z"></path></svg>
            <span class="text-sm font-medium">78</span>
            <span class="absolute inset-0 bg-purple-500/20 dark:bg-purple-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(168,85,247,0.7)]"></span>
          </button>
        </div>
      </div>

      <!-- Post 2 (simpler) -->
      <div class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-lg border border-green-200 dark:border-green-600 relative overflow-hidden transition-all duration-300 hover:shadow-xl hover:dark:shadow-[0_0_20px_rgba(34,197,94,0.6)] group">
        <div class="absolute inset-0 bg-gradient-to-r from-green-300/20 to-lime-300/20 dark:from-green-600/20 dark:to-lime-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
        <div class="flex items-start mb-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="Profile picture of John Smith" class="w-12 h-12 rounded-full mr-3 border-2 border-green-400 dark:border-green-500 shadow-md glow-shadow-xs">
          <div>
            <p class="text-lg font-semibold text-green-800 dark:text-green-300">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">@johnsmith • 1 day ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-200 mb-4 relative z-10">
          Just finished a great coding session! Feeling productive. Share your weekend plans!
        </p>
        <div class="flex justify-around items-center border-t border-green-200 dark:border-green-700 pt-4 relative z-10">
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-green-600 dark:hover:text-green-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            <span class="text-sm font-medium">256</span>
            <span class="absolute inset-0 bg-green-500/20 dark:bg-green-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(34,197,94,0.7)]"></span>
          </button>
          <button class="flex items-center text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transform hover:scale-110 transition-all duration-200 group relative">
            <svg class="w-6 h-6 mr-1" 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>
            <span class="text-sm font-medium">88</span>
            <span class="absolute inset-0 bg-blue-500/20 dark:bg-blue-700/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 -m-2 blur-sm dark:group-hover:shadow-[0_0_10px_rgba(59,130,246,0.7)]"></span>
          </button>
        </div>
      </div>
    </div>

    <!-- Compose Post / Call to Action -->
    <div class="p-4 sm:p-6 bg-gradient-to-l from-green-500 to-emerald-600 dark:from-green-700 dark:to-emerald-900 border-t border-green-400 dark:border-green-700 backdrop-blur-sm shadow-md flex items-center justify-between">
      <input type="text" placeholder="What's on your mind?" class="flex-grow p-3 rounded-lg bg-green-50 text-green-900 dark:bg-gray-800 dark:text-green-200 placeholder-green-700 dark:placeholder-green-400 border border-green-300 dark:border-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:focus:ring-green-300 transition-all duration-200 shadow-inner mr-4">
      <button class="px-5 py-3 bg-white text-green-700 font-bold rounded-lg shadow-lg hover:bg-green-100 dark:bg-green-600 dark:text-white dark:hover:bg-green-500 transition-all duration-300 transform hover:scale-105 active:scale-95 relative glow-effect-button overflow-hidden">
        <span class="relative z-10">Post</span>
        <span class="absolute inset-0 bg-green-400 dark:bg-green-300 mix-blend-multiply opacity-0 hover:opacity-100 transition-opacity duration-300 blur-sm"></span>
      </button>
    </div>

  </div>

  <!-- Custom Styles for glow effects -->
  <style>
    @keyframes pulse-light {
      0%, 100% {
        border-color: rgba(34, 197, 94, 0.7);
        box-shadow: 0 0 15px rgba(34, 197, 94, 0.7), inset 0 0 10px rgba(34, 197, 94, 0.5);
      }
      50% {
        border-color: rgba(59, 230, 110, 0.9);
        box-shadow: 0 0 25px rgba(59, 230, 110, 0.9), inset 0 0 15px rgba(59, 230, 110, 0.7);
      }
    }

    .dark\:animate-pulse-light {
      animation: pulse-light 3s infinite alternate;
    }

    @keyframes pulse-line {
      0%, 100% {
        transform: scaleX(0.8);
        opacity: 0.7;
      }
      50% {
        transform: scaleX(1);
        opacity: 1;
      }
    }

    .animate-pulse-line {
      animation: pulse-line 2s infinite alternate;
    }

    .glow-shadow-sm {
      box-shadow: 0 0 8px rgba(34, 197, 94, 0.4), 0 0 4px rgba(34, 197, 94, 0.2) !important;
    }

    .glow-text-sm {
      text-shadow: 0 0 5px rgba(255,255,255,0.7), 0 0 10px rgba(255,255,255,0.5);
    }

    html.dark .glow-text-sm {
      text-shadow: 0 0 5px rgba(34, 197, 94, 0.9), 0 0 10px rgba(34, 197, 94, 0.7);
    }

    .glow-effect-button:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      transition: transform 0.3s ease-out, opacity 0.3s ease-out;
      pointer-events: none;
      z-index: 0;
    }

    html.dark .glow-effect-button:before {
      box-shadow: 0 0 15px rgba(34, 197, 94, 0.7);
      background: radial-gradient(circle at center, rgba(34, 197, 94, 0.8) 0%, transparent 70%);
      opacity: 0;
    }

    html.dark .glow-effect-button:hover:before {
      transform: scale(1.1);
      opacity: 1;
    }
  </style>
</div>

Glassmorphism Toast Notifications Component

A responsive toast notification component with a glassmorphism design, pastel color scheme, and dark mode support, suitable for booking and reservation systems.

Open Preview

                <div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 p-4 dark:from-gray-900 dark:to-black sm:p-6 lg:p-8">
  <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/1920/1080?blur=5&grayscale'); background-attachment: fixed;"></div>
  
  <div class="relative z-10 flex flex-col items-center justify-center p-4">

    <!-- Toast Notifications Container (example, these would typically be inserted dynamically) -->
    <div class="space-y-4 w-full max-w-sm">

      <!-- Success Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 18 01-9 9 9 9 01-9-9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Success! Your reservation is confirmed.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">See you on <strong>2024-08-15 at 10:00 AM</strong> for your 'Dental Check-up'.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
              View Details
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Dismiss
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Info Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Reminder: Booking details updated.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Your reservation for 'Yoga Class' at <strong>11:00 AM (changed from 10:30 AM)</strong> on August 10th has been adjusted.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800 focus:ring-green-500">
              Acknowledge
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Call Support
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Warning Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Heads Up! Slot for 'Haircut' is limited.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Only <strong>2 slots remaining</strong> on <strong>2024-08-20</strong>. Book now to secure your spot!</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800 focus:ring-red-500">
              Book Now
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Check Calendar
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Error Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Error: Reservation failed.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">The requested time slot for <strong>'Consultation'</strong> on <strong>2024-08-18</strong> is no longer available.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
              Find Another Time
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Contact Support
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

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

Retro_Captcha_Component

A retro/vintage style CAPTCHA component with ocean/blue tones, designed for consulting/services websites. Features a complex interface with a distorted image, audio challenge, and an input field.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-300 to-blue-600 dark:from-gray-900 dark:to-blue-900 p-4 font-mono sm:p-6 lg:p-8">
  <div class="w-full max-w-md rounded-lg shadow-xl overflow-hidden border-4 border-blue-900 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-800 dark:to-blue-950 transform rotate-[-2deg] skew-y-1 relative motion-safe:transition-transform motion-safe:duration-300 hover:rotate-0 hover:skew-y-0">
    <div class="absolute inset-0 bg-blue-200 opacity-20 dark:bg-blue-900 dark:opacity-30 blur-sm pointer-events-none"></div>
    <div class="p-6 relative z-10 space-y-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-blue-900 uppercase tracking-widest text-shadow-sm dark:text-blue-100 dark:text-shadow-md text-center transform rotate-[-1deg]">
        SYSTEM AUTHENTICATION
      </h2>
      <p class="text-sm text-blue-800 text-center font-semibold dark:text-blue-200 leading-snug transform skew-y-1">
        Please prove you're not a robot by completing the challenge below.
      </p>

      <div class="bg-blue-600 border-4 border-blue-900 p-2 rounded transform rotate-[1deg] shadow-lg dark:bg-blue-950 dark:border-blue-700">
        <div class="flex flex-col items-center justify-center p-4 bg-blue-50 border-2 border-blue-400 aspect-video overflow-hidden relative dark:bg-gray-700 dark:border-gray-600">
          <img src="https://picsum.photos/400/150?blur=5&grayscale&random=1" alt="Distorted CAPTCHA image" class="w-full h-full object-cover transform scale-110 rotate-[-3deg] skew-y-2 opacity-80 filter blur-[0.5px] contrast-150 brightness-110" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100/30 via-blue-500/10 to-blue-900/40 dark:from-gray-700/30 dark:via-gray-900/10 dark:to-gray-950/40"></div>
          <p class="absolute text-3xl sm:text-4xl lg:text-5xl font-black text-blue-950 tracking-widest leading-none select-none drop-shadow-lg transform rotate-[3deg] skew-x-3 dark:text-blue-200 dark:drop-shadow-xl">
            <span class="inline-block rotate-[-5deg]">P</span>
            <span class="inline-block rotate-[2deg]">R</span>
            <span class="inline-block rotate-[-1deg]">0</span>
            <span class="inline-block rotate-[4deg]">T</span>
            <span class="inline-block rotate-[-3deg]">E</span>
            <span class="inline-block rotate-[1deg]">C</span>
            <span class="inline-block rotate-[-2deg]">T</span>
          </p>
          <div class="absolute bottom-2 right-2 flex space-x-2">
            <button aria-label="Refresh CAPTCHA" class="p-1.5 bg-blue-200 rounded-full text-blue-800 hover:bg-blue-300 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500 shadow-md transform hover:scale-105 active:scale-95 transition-transform duration-150">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v.622m15.356-2A8.001 8.001 0 0120 12v.622"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>

      <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
        <div class="flex-1">
          <label for="captcha-input" class="block text-sm font-bold text-blue-800 uppercase mb-2 dark:text-blue-200 transform -rotate-[0.5deg]">
            Verify Code:
          </label>
          <input type="text" id="captcha-input" placeholder="Enter the text above..." class="w-full px-4 py-2 bg-blue-50 border-4 border-blue-700 rounded-md text-blue-900 placeholder-blue-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-900 outline-none shadow-inner transform skew-y-[-0.5deg] text-lg lg:text-xl dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-400">
        </div>
        <div class="flex-shrink-0 flex items-end justify-center pt-2 md:pt-0">
          <button aria-label="Play audio CAPTCHA" class="p-3 bg-blue-700 rounded-md text-white border-2 border-blue-900 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-md transform rotate-[2deg] hover:rotate-0 active:scale-95 transition-all duration-200 dark:bg-blue-600 dark:border-blue-800 dark:hover:bg-blue-700">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.998 9.998 0 0119 10a9.998 9.998 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.998 7.998 0 0017 10c0-2.222-.89-4.212-2.343-5.657a1 1 0 010-1.414zm-2.828 2.828a1 1 0 011.414 0A5.996 5.996 0 0115 10a5.996 5.996 0 01-1.757 4.243 1 1 0 01-1.414-1.414A3.996 3.996 0 0013 10c0-1.03-1.04-2.176-1.707-2.828a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
          </button>
        </div>
      </div>

      <div class="pt-4">
        <button type="submit" class="w-full py-3 px-6 bg-blue-900 text-blue-50 uppercase font-extrabold rounded-md shadow-lg border-2 border-blue-950 focus:outline-none focus:ring-4 focus:ring-blue-400 hover:bg-blue-800 dark:bg-blue-700 dark:text-blue-100 dark:border-blue-900 dark:hover:bg-blue-600 transform skew-x-[-1deg] rotate-[0.5deg] tracking-wide text-lg sm:text-xl motion-safe:transition-transform motion-safe:duration-300 hover:skew-x-0 hover:rotate-0 active:scale-98">
          SUBMIT VERIFICATION
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 right-0 p-2 text-blue-900 text-xs opacity-70 dark:text-blue-200 dark:opacity-50 transform rotate-[-2deg]">
      &copy; 2023 RETRO-SECURE. ALL RIGHTS RESERVED.
    </div>
  </div>
</div>

<style>
  /* Custom text-shadow for a retro feel */
  .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), 1px 1px 0px rgba(255, 255, 255, 0.4);
  }
  .dark .text-shadow-sm {
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4), 1px 1px 0px rgba(50, 100, 200, 0.2);
  }
  
  .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), 2px 2px 0px rgba(255, 255, 255, 0.5);
  }
  .dark .text-shadow-md {
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.6), 2px 2px 0px rgba(50, 100, 200, 0.4);
  }
</style>

IndustrialVibrantGovernmentSuccessMessage

A success message component designed for government/public services with an industrial aesthetic, vibrant colors, and dark mode support. It features a raw, utilitarian look with high-saturation accents.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-4 border-emerald-500 dark:border-emerald-600
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl">

    <div class="relative p-6 sm:p-8 md:p-10 text-center">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-600 dark:to-teal-700 opacity-20 dark:opacity-10 pointer-events-none"></div>

      <svg class="mx-auto mb-4 h-16 w-16 text-emerald-600 dark:text-emerald-400
                  transform transition-transform duration-500 ease-in-out hover:rotate-6" 
           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 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>

      <h3 class="text-2xl sm:text-3xl font-bold mb-3 
                 text-gray-900 dark:text-gray-50
                 tracking-tight">
        Operation Confirmed!
      </h3>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
        Your request has been successfully processed and recorded. Thank you for using our public service portal.
      </p>

      <div class="mt-6 flow-root">
        <a href="#" class="inline-flex items-center justify-center 
                          px-6 py-3 border border-transparent rounded-lg 
                          text-lg font-semibold 
                          bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 
                          text-white dark:text-gray-900 
                          shadow-md 
                          transition-colors duration-300 ease-in-out
                          focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 
                          transform hover:-translate-y-0.5 hover:scale-105">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.944A9.004 9.004 0 0118.805 9H13a1 1 0 100 2h5.805A9.004 9 0 0111 16.056V18a1 1 0 11-2 0v-1.944A9.004 9.004 0 011.195 11H7a1 1 0 100-2H1.195A9.004 9.004 0 019 3.944V2a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          Return to Dashboard
        </a>
      </div>
    </div>

    <div class="relative p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-700 border-t-2 border-dashed border-gray-300 dark:border-gray-600 
                flex flex-wrap items-center justify-between text-sm sm:text-base 
                shadow-inner">
      <div class="flex items-center mb-2 sm:mb-0">
        <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" 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="M7 8h10M7 12h10m-9 4h4M8 17v-4m0 0H5v4h3z"></path></svg>
        <span class="text-gray-800 dark:text-gray-200">Reference ID: <strong class="text-emerald-700 dark:text-emerald-300">GOV789-ABC456</strong></span>
      </div>
      <div class="flex items-center text-right ">
        <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-gray-800 dark:text-gray-200">Date: <time datetime="2023-10-27">Oct 27, 2023</time></span>
      </div>
    </div>

    <div class="flex justify-around p-4 sm:p-6 bg-gray-200 dark:bg-gray-700 border-t-4 border-gray-300 dark:border-gray-600">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Download Receipt</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" 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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Email Support</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" 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.228 9.247a1 1 0 010-1.414L10.5 5.5l1.272 1.272a1 1 0 010 1.414L8.228 9.247zM12 21V10m-4 0h8"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Quick Guide</span>
      </a>
    </div>

  </div>

</div>

Gradient_Color_Transition_Pagination_Photography_Complex

A complex, responsive pagination component designed for photography portfolios, featuring heavy use of color gradients and smooth transitions with complementary colors. Includes dark mode support and interactive elements.

Open Preview

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg rounded-xl max-w-4xl mx-auto my-8 overflow-hidden" aria-label="Pagination">
  <div class="flex-1 flex justify-between sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white dark:text-gray-200 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg">
      Previous
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white dark:text-gray-200 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-700 dark:to-indigo-700 hover:from-purple-700 hover:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 transition-all duration-300 ease-in-out shadow-md hover:shadow-lg">
      Next
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300 group">
        Showing
        <span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">1</span>
        to
        <span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">10</span>
        of
        <span class="font-medium bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-orange-500 dark:from-pink-400 dark:to-orange-400">97</span>
        results
      </p>
    </div>
    <div>
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
        <a href="#" aria-current="page" class="z-10 relative inline-flex items-center px-4 py-2 border text-sm font-medium bg-gradient-to-r from-blue-500 to-green-500 text-white dark:from-blue-600 dark:to-green-600 dark:text-gray-100 border-blue-500 dark:border-blue-600 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 hover:from-purple-400 hover:to-pink-400 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">2</span>
        </a>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 hover:from-purple-400 hover:to-pink-400 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">3</span>
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 select-none">
          ...
        </span>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">9</span>
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 transform hover:scale-105 group">
          <span class="group-hover:bg-clip-text group-hover:text-transparent group-hover:bg-gradient-to-r from-purple-500 to-red-500">10</span>
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>

1 ... 80 81 82 83 84 ... 335

Search Components

Categories

All Components