Search Components

All Components

Browse all available Tailwind CSS components

Glassmorphic Music Player Controls

A glassmorphic music player control component with sepia/brown tones, featuring frosted glass-like translucent elements and blur effects. It's responsive, supports dark mode, and is suitable for music streaming and audio platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-stone-900 dark:to-stone-700 font-sans">
  <div class="w-full max-w-md p-6 rounded-3xl backdrop-filter backdrop-blur-xl bg-white/20 dark:bg-stone-800/30 border border-t-white/30 border-l-white/30 border-b-white/10 border-r-white/10 dark:border-t-stone-700/30 dark:border-l-stone-700/30 dark:border-b-stone-900/40 dark:border-r-stone-900/40 shadow-xl overflow-hidden transition-all duration-300 ease-in-out sm:p-8">
    <div class="flex items-center space-x-4 mb-6">
      <img src="https://picsum.photos/seed/music_album/100/100" alt="Album Art" class="w-20 h-20 rounded-xl shadow-lg ring-2 ring-white/30 dark:ring-stone-600/50 object-cover">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-1 leading-tight sm:text-2xl">Lost in the Echoes</h3>
        <p class="text-sm text-stone-700 dark:text-stone-300 sm:text-base">The Echoes of Light</p>
      </div>
    </div>

    <div class="w-full bg-stone-300/50 dark:bg-stone-700/50 rounded-full h-2 mb-4 relative overflow-hidden">
      <div class="bg-amber-700 dark:bg-amber-500 h-full rounded-full" style="width: 65%;"></div>
      <div class="w-3 h-3 rounded-full bg-stone-900 dark:bg-stone-50 absolute top-1/2 -translate-y-1/2" style="left: 65%; transform: translateX(-50%) translateY(-50%);"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-700 dark:text-stone-300 mb-6">
      <span>2:45</span>
      <span>-1:15</span>
    </div>

    <div class="flex items-center justify-around space-x-6 mb-6">
      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M20.25 12a.75.75 0 01-.75.75H6.31l5.47 5.47a.75.75 0 11-1.06 1.06l-6.75-6.75a.75.75 0 010-1.06l6.75-6.75a.75.75 0 111.06 1.06l-5.47 5.47H19.5a.75.75 0 01.75.75z" clip-rule="evenodd" />
        </svg>
      </button>

      <button class="flex items-center justify-center w-16 h-16 rounded-full backdrop-filter backdrop-blur-md bg-amber-600/70 dark:bg-amber-700 text-white shadow-lg transition-all duration-200 ease-in-out hover:scale-105 hover:bg-amber-700/80 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-stone-800/40">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75H16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
        </svg>
         <!-- Play icon (uncomment to show instead of pause) -->
        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.38 2.724-1.638L18.897 12l-11.673 7.985c-1.196.812-2.724-.136-2.724-1.638V5.653z" clip-rule="evenodd" />
        </svg> -->
      </button>

      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="flex items-center justify-between mt-8 pt-4 border-t border-t-white/30 dark:border-t-stone-700/30">
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M18 5.25a2.25 2.25 0 00-2.25-2.25H13.5V6a.75.75 0 01-.75.75H10.5a.75.75 0 01-.75-.75V3H6.75A2.25 2.25 0 004.5 5.25v9.75A2.25 2.25 0 006.75 17.25h11.25A2.25 2.25 0 0020.25 15V5.25z" />
          <path fill-rule="evenodd" d="M5.841 20.352a.75.75 0 01.11.919l-1.396 2.41a.75.75 0 01-1.072.247 5.25 5.25 0 01-2.73-4.226c-.705-2.365 1.01-4.784 3.003-5.264a.75.75 0 01.378.143l1.395 2.41a.75.75 0 01-.069.813 2.998 2.998 0 00-1.029 2.012 2.998 2.998 0 002.585 2.934c.333.035.653.073.955.11z" clip-rule="evenodd" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M13.5 4.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM12 18.75h9v-1.5h-9v1.5zM12 13.5h9v-1.5h-9v1.5zM12 8.25h9V6.75h-9v1.5z" />
          <path d="M9 12a2.25 2.25 0 00-2.25 2.25V17.5L7.5 18H5.25A2.25 2.25 0 013 15.75v-1.5A2.25 2.25 0 015.25 12H9z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path fill-rule="evenodd" d="M9.401 3.003L9.401 3.003c.88-1.523 2.65-1.926 4.172-1.045l1.474.851a9.966 9.966 0 013.255.474c1.196.356 2.052 1.517 1.906 2.709a1.597 1.597 0 00.26 1.056c.408.54.912 1.037 1.463 1.49l1.4.966c1.1.758 1.45 2.201.838 3.419C20.334 16.146 17.518 19 12 19c-3.149 0-5.91-.904-8.082-2.397-1.121-.795-1.874-2.234-1.637-3.666 4.792-.783 7.039-4.717 7.039-4.717z" clip-rule="evenodd" />
          <path d="M11.94 9.141a.75.75 0 10-1.39-.72l.432.842 1.39-.72-.432-.843z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M19.006 3.705a.75.75 0 00-.512-1.113L4.625 1.25A4.5 4.5 0 002.25 5.5V16.5a3 3 0 003 3h.75v3.375c0 .621.504 1.125 1.125 1.125h2.25a.75.75 0 00.75-.75v-3.75H12a.75.75 0 00.75-.75V14.25h.375c2.213 0 4.309-.655 6.004-1.764a.75.75 0 00.186-.135l3.42-3.037a.75.75 0 00.112-.868V4.5a.75.75 0 00-.91-.795zM16.793 9.782l-3.674 3.261a1.5 1.5 0 01-.587.232l-.23.03A.75.75 0 0012 13.5H9.75V5.5c0-.103.003-.205.009-.306C9.916 4.965 10.12 4.5 10.5 4.5h3C4.625 1.25 15.375 1.25 18.04 2.802a.75.75 0 00.41-.013c.962-.438 2.407-.942 3.605-1.124A.75.75 0 0022.5 1.5h.023a.75.75 0 00.046-1.498 7.502 7.502 0 00-6.191 1.026v1.312c0 2.226-1.501 4.25-3.765 4.25h-.548A9.75 9.75 0 014.5 8.25V5.5c0-.853.64-1.564 1.47-.788l11.751 2.35L19.006 3.705z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Neumorphic Product Cards Component - Retro Palette

A complex, responsive product cards component designed with a soft Neumorphic UI style, using a muted retro/vintage color palette. Features include dark mode support, subtle shadows for extrusion effect, and semantic HTML for accessibility. Suitable for reading and content consumption, such as a blog or content display.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 bg-lime-100 dark:bg-gray-800 min-h-screen font-sans antialiased transition-colors duration-300">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-lime-900 dark:text-gray-100 mb-8 text-center drop-shadow-sm">
    Featured Blog Posts
  </h2>

  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 md:gap-10">

    <!-- Product Card 1 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/684/600/400" alt="Abstract art" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          The Art of Slow Living: Embracing Mindfulness
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Discover how to cultivate a more peaceful and intentional life by incorporating mindful practices into your daily routine. From simple breathing exercises to creating a serene home environment, this post explores practical tips for embracing the slow living movement...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">Jane Doe</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 26, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-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="M9 5l7 7-7 7"></path></svg>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

    <!-- Product Card 2 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/1025/600/400" alt="Mountain landscape" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          Exploring Vintage Photography Techniques
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Dive into the fascinating world of analogue photography. This post covers classic techniques, from experimenting with film cameras to developing your own prints, and tips to capture that timeless, retro feel...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">John Smith</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 19, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-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="M9 5l7 7-7 7"></path></svg>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

    <!-- Product Card 3 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/40/600/400" alt="Coffee and notes" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          Retro Gaming Revival: A Look Back at Classics
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Join us on a nostalgic journey through the golden age of video games. From pixelated wonders to iconic consoles, we revisit the titles that defined a generation and explore their lasting impact...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">Alice Brown</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 12, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-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="M9 5l7 7-7 7"></path></svg>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

  </div>

  <!-- Tailwind CSS Customizations (typically in tailwind.config.js) -->
  <style>
    .shadow-neumorphic-light-xl {
      box-shadow: 10px 10px 20px #97ac88, -10px -10px 20px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark-xl {
      box-shadow: 10px 10px 20px #4e4e4e, -10px -10px 20px #828282;
    }

    .shadow-neumorphic-light-pressed {
      box-shadow: inset 5px 5px 10px #97ac88, inset -5px -5px 10px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark-pressed {
      box-shadow: inset 5px 5px 10px #4e4e4e, inset -5px -5px 10px #828282;
    }

    .shadow-neumorphic-inset-light {
      box-shadow: inset 5px 5px 10px #97ac88, inset -5px -5px 10px #d5ffb8;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 5px 5px 10px #4e4e4e, inset -5px -5px 10px #828282;
    }
    
    /* Smaller, general neumorphic shadow for avatars, buttons */
    .shadow-neumorphic-light {
        box-shadow: 3px 3px 6px #97ac88, -3px -3px 6px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark {
        box-shadow: 3px 3px 6px #4e4e4e, -3px -3px 6px #828282;
    }

    /* Retro palette colors as reference: */
    /* Light Mode: */
    /* Background: --lime-100 (#ebf8dc) */
    /* Card BG: --lime-200 (#dceeb7) */
    /* Primary Text/Icons: --lime-700 (#6f8f4a), --lime-800 (#4a6a25), --lime-900 (#3d591c) */
    /* Secondary Text: --teal-700 (#4a7a7a), --teal-800 (#2a5a5a) */
    /* Button/Interactive: --lime-300 (#c8e49e) */

    /* Dark Mode: */
    /* Background: --gray-800 (#2d3748) */
    /* Card BG: --gray-700 (#4a5568) */
    /* Primary Text/Icons: --gray-100 (#f7fafc), --gray-200 (#edf2f7) */
    /* Secondary Text: --gray-300 (#e2e8f0), --gray-400 (#cbd5e0) */
    /* Button/Interactive: --gray-600 (#718096) */

    /* Note: For a real project, these custom shadows would be configured in `tailwind.config.js` 
       under the `theme.extend.boxShadow` property for reusability. 
       This inline style is for demonstration purposes within a single file. */
  </style>
</div>

Social Login Component

A complex social login component for a marketplace, featuring social login buttons, email/password fields, and 'forgot password'/'sign up' links. Designed with Material Design principles using jewel tones, full responsiveness, and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-lg">
    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Welcome Back!
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-8 text-center">
        Log in to your marketplace account
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md 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-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-emerald-600 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 12c0-1.04-.09-2.05-.25-3.03H12v6h5.8c-.28 1.95-1.16 3.59-2.66 4.67v3.08h2.64c1.55-1.46 2.45-3.54 2.45-5.92z" fill="#4285F4"/>
            <path d="M12 22c3.24 0 5.96-1.08 7.95-2.92l-2.64-3.08c-1.07.72-2.45 1.15-4.11 1.15-3.14 0-5.83-2.11-6.79-4.87H2.89v3.08C4.84 19.38 8.1 22 12 22z" fill="#34A853"/>
            <path d="M5.21 15.02c-.17-.5-.27-1.04-.27-1.61s.1-.94.27-1.44V8.89H2.89C2.26 10.15 2 11.51 2 13s.26 2.85.89 4.11L5.21 15.02z" fill="#FBBC05"/>
            <path d="M12 4.01c1.76 0 3.32.6 4.54 1.76l2.31-2.31C17.97 1.83 15.22 0 12 0 8.1 0 4.84 2.62 2.89 6.09l2.32 1.8C6.17 4.58 8.86 2.47 12 2.47z" fill="#EA4335"/>
          </svg>
          Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md 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-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-emerald-600 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.96 3.65 9.09 8.42 9.87V14.6h-2.54V12h2.54V9.78c0-2.5 1.5-3.88 3.77-3.88 1.09 0 2.05.08 2.32.12v2.1l-1.24.01c-1.22 0-1.45.58-1.45 1.42V12h2.89l-.45 2.6h-2.44v7.27C18.35 21.09 22 16.96 22 12z" fill="#1877F2"/>
          </svg>
          Facebook
        </button>
      </div>

      <div class="relative flex py-5 items-center mb-6">
        <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
        <span class="flex-shrink mx-4 text-gray-400 dark:text-gray-500 text-sm">Or continue with</span>
        <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
      </div>

      <form class="space-y-6">
        <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 class="appearance-none 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-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Password
          </label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none 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-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 transition-colors duration-200">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <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-sapphire-600 hover:bg-sapphire-700 dark:bg-sapphire-700 dark:hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 transition-colors duration-200" style="@apply bg-blue-700 hover:bg-blue-800 dark:bg-blue-600;">
            Sign in
          </button>
        </div>
      </form>

      <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-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-200">
          Sign up
        </a>
      </p>
    </div>
  </div>
</div>

<style>
  /* Custom colors for jewel tones (tailwind.config.js usually handles this) */
  .bg-sapphire-600 {
    background-color: #2F599A; /* Example: A deep blue */
  }
  .hover\:bg-sapphire-700:hover {
    background-color: #264A81; /* Darker on hover */
  }
  .dark\:bg-sapphire-700 {
    background-color: #264A81;
  }
  .dark\:hover\:bg-sapphire-800:hover {
    background-color: #1D3A68;
  }
  .focus\:ring-sapphire-500:focus {
    --tw-ring-color: #3F6DAF;
  }

  .text-emerald-600 {
    color: #048C54; /* Example: A rich emerald green */
  }
  .hover\:text-emerald-500:hover {
    color: #037A47;
  }
  .dark\:text-emerald-400 {
    color: #12B377;
  }
  .dark\:hover\:text-emerald-300:hover {
    color: #0FB16C;
  }
</style>

Skip to Content Link Component

A clean, minimalist 'skip to content' link component for sports/fitness applications, designed with a grayscale color scheme. It's responsive and supports dark mode, emphasizing typography and accessibility.

Open Preview

                <header class="bg-white py-4 shadow-sm dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:left-1/2 focus:-translate-x-1/2 focus:top-4 focus:z-50 px-4 py-2 bg-black text-white dark:bg-white dark:text-black rounded-md text-sm font-semibold tracking-tight uppercase focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white transition-colors duration-200">
    Skip to Main Content
  </a>
  <nav class="container mx-auto px-4 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-900 dark:text-white uppercase tracking-tighter">
      <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200">AthleticPulse</a>
    </div>
    <ul class="hidden md:flex space-x-8">
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Workout Plans</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Nutrition Guides</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Team Stats</a></li>
      <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium uppercase text-sm tracking-tight transition-colors duration-200">Classes</a></li>
    </ul>
    <button class="md:hidden flex items-center p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white rounded-md" aria-label="Open menu">
      <svg class="w-6 h-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="M4 6h16M4 12h16M4 18h16"></path></svg>
    </button>
  </nav>
</header>

<main id="main-content" class="container mx-auto px-4 py-12 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-screen">
  <h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-black dark:text-white uppercase tracking-tighter leading-tight">
    Unleash Your Full Potential
  </h1>
  <p class="text-lg md:text-xl leading-relaxed mb-8 max-w-3xl">
    Welcome to AthleticPulse – your ultimate destination for achieving peak physical performance. Explore our expertly crafted workout plans, comprehensive nutrition guides, and real-time team statistics.
  </p>
  <section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=1" alt="Workout Plan" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Strength Training</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Build muscle and increase power with our tailored strength programs.</p>
    </div>
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=2" alt="Nutrition Guide" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Balanced Diet</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Fuel your body right with our expert nutrition advice and meal plans.</p>
    </div>
    <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-md border border-gray-100 dark:border-gray-700">
      <img src="https://picsum.photos/400/250?random=3" alt="Team Stats" class="w-full h-40 object-cover rounded-md mb-4 border border-gray-200 dark:border-gray-600">
      <h3 class="text-xl font-bold mb-2 text-gray-900 dark:text-white uppercase tracking-tight">Performance Tracking</h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm">Monitor your team's progress and individual achievements.</p>
    </div>
  </section>

  <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-inner border border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white uppercase tracking-tight">Latest Updates</h2>
      <ul class="space-y-4">
          <li class="flex items-start">
              <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
                  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
              </div>
              <div>
                  <p class="text-gray-800 dark:text-gray-200 font-semibold">New Speed Training Module Launched!</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Our new module focuses on agility drills and explosive power. Available now.</p>
              </div>
          </li>
           <li class="flex items-start">
              <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden mr-4 border-2 border-black dark:border-white">
                  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-full h-full object-cover">
              </div>
              <div>
                  <p class="text-gray-800 dark:text-gray-200 font-semibold">March Fitness Challenge Winners Announced!</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">A huge congratulations to all participants. Check your dashboard for insights.</p>
              </div>
          </li>
      </ul>
  </div>
</main>

<footer class="bg-black text-white dark:bg-gray-950 py-6 mt-12">
  <div class="container mx-auto px-4 text-center text-sm font-medium uppercase tracking-tight">
    &copy; 2023 AthleticPulse. All rights reserved.
  </div>
</footer>

Luxury Notifications Component

A simple, elegant notifications component designed for travel/tourism websites, featuring a luxury/premium style with corporate blue tones and full responsiveness, including dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="px-6 py-5 sm:px-8 sm:py-6 bg-gradient-to-r from-blue-600 to-blue-800 dark:from-blue-700 dark:to-blue-900 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Notifications</h2>
      <span class="px-3 py-1 bg-white dark:bg-gray-700 text-blue-800 dark:text-blue-200 rounded-full text-base font-semibold shadow-md">3 New</span>
    </div>

    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Notification Item 1 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            Reservation confirmed for Paris!
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Your flight and hotel booking for Paris is confirmed. Have a great trip!
          </p>
          <time datetime="2023-10-27T10:00:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">2 hours ago</time>
        </div>
      </li>

      <!-- Notification Item 2 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://picsum.photos/id/1018/100/100" alt="Offer Icon">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            New Exclusive Travel Deals!
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Don't miss out on our limited-time offers to dreamy destinations.
          </p>
          <time datetime="2023-10-27T08:30:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">4 hours ago</time>
        </div>
      </li>

      <!-- Notification Item 3 -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 group hover:bg-blue-50 dark:hover:bg-gray-700 transition-colors duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-300 dark:ring-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Support Avatar">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 truncate">
            Quick Question About Your Upcoming Trip
          </p>
          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Our support team wants to clarify a detail about your London itinerary.
          </p>
          <time datetime="2023-10-26T16:45:00Z" class="text-xs text-gray-500 dark:text-gray-400 mt-2 block">Yesterday</time>
        </div>
      </li>

      <!-- Notification Item 4 (Old/Read) -->
      <li class="p-4 sm:p-6 flex items-start space-x-4 dark:bg-gray-700/50 opacity-80 group hover:opacity-100 hover:bg-blue-50 dark:hover:bg-gray-700 transition-all duration-200 cursor-pointer">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover shadow-sm ring-2 ring-blue-200 dark:ring-gray-600" src="https://picsum.photos/id/1084/100/100" alt="Tips Icon">
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-lg font-medium text-gray-500 dark:text-gray-400 truncate">
             Travel Safety Tips for Rome
          </p>
          <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
            Important advice to ensure a safe and enjoyable trip to Rome.
          </p>
          <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-400 dark:text-gray-500 mt-2 block">2 days ago</time>
        </div>
      </li>

    </ul>

    <div class="p-4 sm:p-6 text-center border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 text-base font-semibold group">
        View All Notifications
        <svg class="ml-1 h-4 w-4 transform transition-transform duration-200 group-hover:translate-x-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="M9 5l7 7-7 7"></path></svg>
      </a>
    </div>
  </div>
</div>

Cyberpunk_Gaming_Maps_Component

A simple, responsive cyberpunk-themed maps component for gaming interfaces, featuring dark backgrounds, neon accents, and analogous color scheme. Includes dark mode support.

Open Preview

                <div class="p-4 md:p-8 bg-gray-950 dark:bg-black text-gray-200 min-h-screen font-mono">
    <div class="max-w-4xl mx-auto bg-gray-900 dark:bg-gray-950 border-2 border-fuchsia-600 dark:border-purple-700 shadow-2xl shadow-fuchsia-800/50 dark:shadow-purple-900/50 rounded-lg overflow-hidden relative">
        <!-- Neon Glitch Overlay -->
        <div class="absolute inset-0 z-0 opacity-10 blur-xl animate-pulse" style="background-image: linear-gradient(to right, #8A2BE2, #A020F0, #FF00FF);"></div>

        <div class="relative z-10 p-4 sm:p-6 md:p-8">
            <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-fuchsia-400 dark:text-purple-400 uppercase tracking-widest leading-tight border-b-2 border-fuchsia-700 dark:border-purple-600 pb-2">
                <span class="block text-xs text-fuchsia-600 dark:text-purple-500 mb-1">SYSTEM MAP</span>
                NEO-TOKYO SECTOR 7
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Map Placeholder -->
                <div class="order-2 md:order-1 bg-gray-800 dark:bg-gray-900 border border-fuchsia-700 dark:border-purple-700 rounded-md overflow-hidden relative group aspect-video sm:aspect-[4/3] md:aspect-square lg:aspect-video">
                    <img src="https://picsum.photos/id/237/600/400?grayscale&blur=2" alt="Cyberpunk Map Grid" class="w-full h-full object-cover opacity-70 group-hover:opacity-100 transition-opacity duration-300">
                    <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-900/30 via-purple-700/20 to-indigo-900/30 opacity-70 group-hover:opacity-90 transition-opacity duration-300"></div>
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <span class="text-fuchsia-300 dark:text-purple-300 text-6xl md:text-8xl font-black opacity-10 select-none">MAP</span>
                    </div>
                    <div class="absolute top-2 left-2 text-fuchsia-400 dark:text-purple-400 text-sm md:text-base">[23:45:01] GRID: A-7</div>
                    <div class="absolute bottom-2 right-2 flex space-x-2">
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">+</button>
                        <button class="px-3 py-1 bg-fuchsia-600 dark:bg-purple-600 text-white text-xs rounded-full hover:bg-fuchsia-500 dark:hover:bg-purple-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">-</button>
                    </div>
                </div>

                <!-- Map Controls/Info -->
                <div class="order-1 md:order-2 space-y-4">
                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">NAVIGATION</h3>
                        <div class="flex flex-wrap gap-2">
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">TARGET</span> SECTOR A
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">PING</span> LOCATION
                            </button>
                            <button class="flex-grow text-center px-4 py-2 bg-fuchsia-700 dark:bg-purple-700 text-fuchsia-100 dark:text-purple-100 rounded-sm text-sm font-bold uppercase transition-transform transform hover:scale-105 hover:bg-fuchsia-600 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-400 dark:focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900">
                                <span class="hidden sm:inline">ROUTE</span> OPTIMIZE
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                        <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">ACTIVE DATASTREAM</h3>
                        <p class="text-xs text-gray-400 leading-relaxed">
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> INCOMING ENCRYPTED TRANSMISSION #0XF3C.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> LOCAL GRID STATUS: STABLE. TRAFFIC FLOW NORM <span class="text-green-400">[OPTIMAL]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> ANOMALY DETECTED: SECTOR 7-B. <span class="text-yellow-400">[INVESTIGATE]</span>.<br>
                            <span class="text-fuchsia-500 dark:text-purple-500">&gt;</span> SYSTEM HEALTH: <span class="text-fuchsia-400 dark:text-purple-400">98%</span>. DIAGNOSTICS COMPLETE.
                        </p>
                        <div class="mt-3 flex justify-end">
                            <button class="px-4 py-2 bg-fuchsia-900 dark:bg-purple-900 text-fuchsia-300 dark:text-purple-300 text-sm rounded-sm hover:bg-fuchsia-800 dark:hover:bg-purple-800 transition-colors duration-200 outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
                                CLEAR LOG
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-6 bg-gray-800 dark:bg-gray-900 p-4 rounded-md border border-fuchsia-700 dark:border-purple-700 shadow-inner shadow-fuchsia-900/20 dark:shadow-purple-900/20">
                <h3 class="text-fuchsia-300 dark:text-purple-300 text-lg font-semibold mb-2">WAYPOINTS</h3>
                <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></span>
                        <span>HQ: 12.4km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-blue-600 rounded-full"></span>
                        <span>DATANODE ALPHA: 3.1km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-green-600 rounded-full"></span>
                        <span>SAFEZONE γ: 7.8km</span>
                    </div>
                    <div class="flex items-center space-x-2 text-sm">
                        <span class="w-3 h-3 bg-yellow-600 rounded-full animate-ping"></span>
                        <span class="text-yellow-400">UNKNOWN SIG: 0.5km</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Glassmorphism_CAPTCHA_Component_Forest_Green

A responsive glassmorphism-style CAPTCHA component with a forest green color scheme, suitable for manufacturing/industrial applications. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-green-100 via-green-50 to-emerald-100 dark:from-gray-900 dark:via-gray-800 dark:to-teal-900 p-4 font-sans">
  <div class="relative w-full max-w-md mx-auto bg-white/20 dark:bg-gray-800/30 backdrop-blur-lg rounded-2xl shadow-xl border border-white/30 dark:border-gray-700/50 overflow-hidden p-6 sm:p-8">
    <div class="absolute inset-0 bg-gradient-to-br from-emerald-400/20 to-green-600/20 dark:from-gray-700/20 dark:to-gray-900/20 rounded-2xl animate-pulse-slow"></div>
    <div class="relative z-10 space-y-6">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-green-900 dark:text-green-200 text-center flex items-center justify-center gap-2">
        <svg class="w-8 h-8 text-emerald-700 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.944 12c0 2.879 1.136 5.513 2.944 7.465S9.123 21.052 12 21.052c2.879 0 5.513-1.136 7.465-2.944S21.052 14.879 21.052 12A12.01 12.01 0 0018.06 7.004z"></path></svg>
        Security Check
      </h2>
      <p class="text-lg text-green-800 dark:text-green-300 text-center">
        Please verify you are not a robot.
      </p>

      <!-- Example: Image CAPTCHA -->
      <div class="bg-white/40 dark:bg-gray-700/40 border border-t-white border-l-white dark:border-t-gray-600 dark:border-l-gray-600 border-b-white/50 border-r-white/50 dark:border-b-gray-600/50 dark:border-r-gray-600/50 rounded-lg p-4 shadow-inner space-y-4">
        <p class="text-green-900 dark:text-green-100 text-center font-medium">Select all squares with a <span class="font-bold text-emerald-700 dark:text-emerald-400">forklift</span>:</p>
        <div class="grid grid-cols-3 gap-2">
          <button class="captcha-grid-item group" aria-label="Image 1">
            <img src="https://picsum.photos/id/1084/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 2">
            <img src="https://picsum.photos/id/400/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 3">
            <img src="https://picsum.photos/id/35/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 4">
            <img src="https://picsum.photos/id/29/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 5">
            <img src="https://picsum.photos/id/1060/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 6">
            <img src="https://picsum.photos/id/426/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 7">
            <img src="https://picsum.photos/id/194/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
          <button class="captcha-grid-item group selected" aria-label="Image 8">
            <img src="https://picsum.photos/id/145/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            </div>
          </button>
          <button class="captcha-grid-item group" aria-label="Image 9">
            <img src="https://picsum.photos/id/175/200/200" alt="Placeholder image for CAPTCHA grid" class="w-full h-full object-cover rounded-md transition-transform duration-200 group-hover:scale-105">
            <div class="captcha-overlay"></div>
          </button>
        </div>
      </div>

      <div class="flex items-center justify-between gap-4">
        <button class="inline-flex items-center justify-center p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 bg-white/50 dark:bg-gray-700/50 backdrop-blur-sm text-green-800 dark:text-green-300 hover:text-emerald-700 dark:hover:text-emerald-200 transition-colors border border-white/60 dark:border-gray-600/60 shadow-md" aria-label="Refresh CAPTCHA">
          <svg class="w-6 h-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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.127.818 4.044 2.146 5.5M16 4v5h.582m-15.356 2A8.001 8.001 0 0120 12c0-2.127-.818-4.044-2.146-5.5"></path></svg>
        </button>
        <button class="flex-1 py-3 px-6 bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold rounded-lg shadow-lg transform transition duration-300 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 dark:focus:ring-emerald-400 focus:ring-offset-white/20 dark:focus:ring-offset-gray-800/20">
          Verify
        </button>
      </div>

      <p class="text-sm text-center text-green-700 dark:text-green-400 opacity-80">
        Protected by Industrial CAPTCHA™
      </p>
    </div>
  </div>
</div>

<style>
  /* Animation for the background blob */
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.05); opacity: 0.3; }
  }

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

  /* CAPTCHA grid item styles */
  .captcha-grid-item {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* For square aspect ratio */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    display: block;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.2s, background-color 0.2s;
  }

  .captcha-grid-item:hover {
    border-color: rgba(5, 150, 105, 0.6); /* emerald-600 with transparency */
    transform: scale(1.02);
  }

  .captcha-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .captcha-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(5, 150, 105, 0.4); /* emerald-600 with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .captcha-grid-item.selected .captcha-overlay {
    opacity: 1;
    background-color: rgba(5, 150, 105, 0.7); /* More opaque when selected */
  }

  .captcha-grid-item.selected {
    border-color: #059669; /* Solid emerald-600 when selected */
  }

  /* Dark mode adjustments for border colors */
  .dark .captcha-grid-item {
    background-color: rgba(55, 65, 81, 0.6); /* gray-700/60 */
  }

  .dark .captcha-grid-item:hover {
    border-color: rgba(16, 185, 129, 0.6); /* emerald-500 with transparency */
  }

  .dark .captcha-grid-item.selected {
    border-color: #10B981; /* Solid emerald-500 dark mode */
  }
  .dark .captcha-overlay {
    background-color: rgba(16, 185, 129, 0.4); /* emerald-500 with transparency */
  }

  .dark .captcha-grid-item.selected .captcha-overlay {
    background-color: rgba(16, 185, 129, 0.7); /* More opaque when selected */
  }
</style>

Art Deco Checkout Form

A complex, responsive checkout form component with an Art Deco design style, featuring geometric patterns and luxurious styling in ocean/blue tones. Designed for professional consulting/services, with full dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-950 to-blue-700 dark:from-gray-950 dark:to-blue-900 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-in-out scale-100 hover:scale-[1.01] border-4 border-blue-600 dark:border-blue-700 relative">
    <!-- Art Deco Top Border -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-800 via-sky-600 to-blue-800 dark:from-blue-900 dark:via-blue-700 dark:to-blue-900"></div>
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-blue-800 via-sky-600 to-blue-800 dark:from-blue-900 dark:via-blue-700 dark:to-blue-900"></div>
    
    <div class="p-6 sm:p-8 lg:p-10 relative z-10">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-center text-blue-900 dark:text-sky-400 mb-8 sm:mb-10 tracking-wider drop-shadow-lg leading-tight">
        <span class="block">Finalize Your <span class="text-blue-600 dark:text-blue-400">Consultation</span></span>
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10">

        <!-- Left Column: Order Summary / Service Details -->
        <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-6 shadow-inner border border-blue-200 dark:border-gray-600">
          <h3 class="text-2xl font-semibold text-blue-800 dark:text-sky-300 mb-5 relative pb-3 border-b-2 border-blue-300 dark:border-gray-600">
            Service Details
            <span class="absolute bottom-[-2px] left-0 w-1/4 h-[2px] bg-sky-500"></span>
          </h3>
          <dl class="space-y-4 text-blue-900 dark:text-gray-200">
            <div class="flex justify-between items-center">
              <dt class="font-medium">Service Package:</dt>
              <dd class="text-lg font-bold text-blue-700 dark:text-sky-400">Premium Business Strategy</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Consultant:</dt>
              <dd class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Consultant John Doe" class="w-8 h-8 rounded-full border-2 border-sky-500 dark:border-sky-400">
                <span>John Doe</span>
              </dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Planned Date:</dt>
              <dd>October 26, 2024</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Duration:</dt>
              <dd>3 Hours</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Base Price:</dt>
              <dd>$1,500.00</dd>
            </div>
            <div class="flex justify-between items-center border-t border-dashed border-blue-200 dark:border-gray-600 pt-4">
              <dt class="font-medium">Taxes (7%):</dt>
              <dd>$105.00</dd>
            </div>
            <div class="flex justify-between items-center border-t-2 border-blue-400 dark:border-blue-600 pt-4 font-bold text-xl">
              <dt class="text-blue-900 dark:text-sky-300">Total Amount:</dt>
              <dd class="text-blue-800 dark:text-sky-400">$1,605.00</dd>
            </div>
          </dl>
        </div>

        <!-- Right Column: Payment & Billing Details -->
        <div class="bg-blue-50 dark:bg-gray-700 rounded-lg p-6 shadow-inner border border-blue-200 dark:border-gray-600">
          <h3 class="text-2xl font-semibold text-blue-800 dark:text-sky-300 mb-5 relative pb-3 border-b-2 border-blue-300 dark:border-gray-600">
            Payment Information
            <span class="absolute bottom-[-2px] left-0 w-1/4 h-[2px] bg-sky-500"></span>
          </h3>
          <form class="space-y-6">
            <div>
              <label for="card-number" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Card Number</label>
              <input type="text" id="card-number" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="_ _ _ _  _ _ _ _  _ _ _ _  _ _ _ _">
            </div>
            <div class="grid grid-cols-2 gap-4">
              <div>
                <label for="exp-date" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Exp. Date</label>
                <input type="text" id="exp-date" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">CVV</label>
                <input type="text" id="cvv" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="123">
              </div>
            </div>
            <div>
              <label for="card-name" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Name on Card</label>
              <input type="text" id="card-name" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="John D. Smith">
            </div>
            <div>
              <label for="billing-address" class="block text-sm font-medium text-blue-800 dark:text-gray-200 mb-2">Billing Address</label>
              <input type="text" id="billing-address" class="w-full p-3 border border-blue-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-blue-900 dark:text-white focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 ease-in-out placeholder-blue-400 dark:placeholder-gray-500" placeholder="123 Main St"> 
            </div>
            <div class="flex items-center justify-between text-blue-800 dark:text-gray-200 text-sm">
              <div class="flex items-center">
                <input id="save-card" name="save-card" type="checkbox" class="h-4 w-4 text-sky-600 border-blue-300 dark:border-gray-600 rounded focus:ring-sky-500">
                <label for="save-card" class="ml-2 block text-blue-800 dark:text-gray-200">Save card details</label>
              </div>
              <a href="#" class="text-sky-600 hover:text-sky-800 dark:text-sky-400 dark:hover:text-sky-300 font-medium transition duration-200 ease-in-out">Forgot something?</a>
            </div>
            <button type="submit" class="w-full py-4 px-6 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-sky-600 text-white font-bold rounded-lg shadow-lg text-xl tracking-wide transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-700 relative overflow-hidden">
              <span class="relative z-10">Confirm Booking & Pay</span>
              <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer transition-all duration-300"></div>
            </button>
          </form>
        </div>
      </div>

      <!-- Footer Note -->
      <div class="mt-10 text-center text-blue-800 dark:text-gray-300 text-sm sm:text-base">
        <p>&copy; <a href="#" class="text-blue-600 hover:text-blue-800 dark:text-sky-400 dark:hover:text-sky-300 font-semibold">Art Deco Consulting</a> 2024. All rights reserved. Your data is secured with 256-bit encryption.</p>
      </div>

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

<style>
  /* Custom animations for Art Deco shimmer effect on button */
  @keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .animate-shimmer {
    animation: shimmer 1.5s infinite;
  }
</style>

Brutalist_Pastel_News_Footer

A complex, brutalist-style footer navigation component for news/journalism websites, featuring pastel colors, high contrast, and unusual layouts. It is fully responsive and supports dark mode.

Open Preview

                <footer class="bg-pink-100 text-purple-900 dark:bg-purple-900 dark:text-pink-100 font-mono border-t-8 border-r-8 border-b-8 border-l-8 border-purple-900 dark:border-pink-100 shadow-[10px_10px_0px_0px_rgba(109,40,217,0.7)] dark:shadow-[10px_10px_0px_0px_rgba(252,211,255,0.7)] transition-all duration-300">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12 lg:gap-16">
    
    <!-- Section 1: Logo and Tagline -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1 flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-black tracking-tighter hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 uppercase transform -rotate-3 mb-4">
        The Squawk
      </a>
      <p class="text-sm lg:text-base font-bold leading-tight uppercase border-l-4 border-b-4 border-purple-900 dark:border-pink-100 pl-2 pb-1 bg-pink-200 dark:bg-purple-800 inline-block rotate-1">
        Unfiltered. Uncensored. Unequivocal.
      </p>
    </div>

    <!-- Section 2: Quick Links -->
    <div class="relative col-span-1 border-2 border-dashed border-purple-900 dark:border-pink-100 p-6 -rotate-1 hover:rotate-0 transform transition-transform duration-300">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -top-4 -left-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-r-4 border-b-4 border-pink-100 dark:border-purple-900">
        Explore
      </h3>
      <nav class="mt-6">
        <ul class="space-y-3">
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Breaking News</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Investigations</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Opinion Pieces</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> World Affairs</a></li>
          <li><a href="#" class="text-lg font-bold hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200 flex items-center group"><span class="text-3xl leading-none mr-2 group-hover:animate-bounce-y origin-bottom">&#x27A1;</span> Local Report</a></li>
        </ul>
      </nav>
    </div>

    <!-- Section 3: Categories & Archives -->
    <div class="relative col-span-1 bg-purple-200 dark:bg-purple-700 p-6 transform rotate-2 hover:rotate-0 transition-transform duration-300 border-l-4 border-t-4 border-purple-900 dark:border-pink-100">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 tracking-tighter absolute -bottom-4 -right-4 bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 px-3 py-1 border-l-4 border-t-4 border-pink-100 dark:border-purple-900">
        Archives
      </h3>
      <nav class="grid grid-cols-2 gap-4 text-sm lg:text-base font-semibold uppercase">
        <ul class="space-y-2">
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Politics</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Economy</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Science</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Culture</a></li>
        </ul>
        <ul class="space-y-2">
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Sports</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Health</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Technology</a></li>
          <li><a href="#" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">Environment</a></li>
        </ul>
      </nav>
    </div>

    <!-- Section 4: Contact & Social -->
    <div class="col-span-1 flex flex-col items-center md:items-end lg:items-start p-4 border-4 border-double border-purple-900 dark:border-pink-100 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
      <h3 class="text-xl lg:text-2xl font-extrabold uppercase mb-4 text-center tracking-tighter bg-purple-900 leading-none p-2 text-pink-100 dark:bg-pink-100 dark:text-purple-900 border-b-4 border-r-4 border-pink-100 dark:border-purple-900">
        Get In Touch
      </h3>
      <address class="not-italic text-sm lg:text-base text-center md:text-right lg:text-left leading-relaxed mb-4">
        123 News Alley, Metropolis, NY 10001<br>
        <a href="mailto:[email protected]" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">[email protected]</a><br>
        <a href="tel:+15551234567" class="hover:underline hover:text-purple-700 dark:hover:text-pink-300 transition-colors duration-200">+1 (555) 123-4567</a>
      </address>
      <div class="flex space-x-4 mb-4">
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-6 hover:rotate-0"><span aria-label="Facebook">&#x1F4F0;</span></a>
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform -rotate-6 hover:rotate-0"><span aria-label="Twitter">&#x1F426;</span></a>
        <a href="#" class="text-2xl hover:scale-125 transition-transform duration-200 transform rotate-3 hover:rotate-0"><span aria-label="Instagram">&#x1F4F7;</span></a>
      </div>
      <img src="https://picsum.photos/id/1005/100/100" alt="Placeholder image" class="w-16 h-16 object-cover border-4 border-purple-900 dark:border-pink-100 rounded-lg transform -rotate-6 blur-[1px] hover:blur-none transition-all duration-300">
    </div>

  </div>

  <!-- Bottom Bar: Copyright & Impressum -->
  <div class="bg-purple-900 text-pink-100 dark:bg-pink-100 dark:text-purple-900 py-4 px-4 text-center text-xs font-bold uppercase tracking-wide border-t-8 border-purple-900 dark:border-pink-100 relative overflow-hidden">
    <p class="z-10 relative opacity-90">© 2023 THE SQUAWK. ALL RIGHTS RESERVED. <span class="hidden md:inline">A FREE PRESS INITIATIVE.</span></p>
    <a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">PRIVACY POLICY</a>
    <a href="#" class="text-pink-300 dark:text-purple-700 hover:underline z-10 relative block md:inline-block md:ml-4 mt-1 md:mt-0">TERMS OF SERVICE</a>
    <div class="absolute inset-0 bg-yellow-300 dark:bg-blue-300 opacity-20 transform -skew-x-12 scale-150 rotate-3 animate-pulse-slow pointer-events-none"></div>
  </div>
</footer>

<!-- Tailwind CSS extended configuration for custom animations (add to tailwind.config.js) -->
<style>
@keyframes bounce-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); /* Smaller bounce for subtle effect */}
}
.animate-bounce-y {
  animation: bounce-y 0.6s infinite alternate ease-in-out;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.2; transform: -skew-x-12 scale-150 rotate(3); }
  50% { opacity: 0.4; transform: -skew-x-12 scale-155 rotate(5); }
}
.animate-pulse-slow {
  animation: pulse-slow 8s infinite ease-in-out;
}
</style>

Monospace_Dating_Login_Signup_Component

A simple, responsive login/signup component for dating/social platforms with a monospace, code-inspired design. Features black and white monochrome with a bright accent color, and full dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border-2 border-gray-900 dark:border-gray-100 font-mono">
    <div class="bg-gray-900 dark:bg-gray-100 text-green-400 dark:text-gray-900 p-3 flex items-center justify-between text-sm">
      <span class="flex items-center">
        <span class="h-2 w-2 rounded-full bg-red-500 mr-1"></span>
        <span class="h-2 w-2 rounded-full bg-yellow-500 mr-1"></span>
        <span class="h-2 w-2 rounded-full bg-green-500"></span>
      </span>
      <span class="terminal-title">_date_terminal.sh</span>
      <span></span>
    </div>
    <div class="p-6 lg:p-8">
      <h2 class="text-2xl lg:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-gray-100">
        <span class="text-green-500 dark:text-pink-500">_</span>CONNECT
      </h2>

      <div class="mb-4">
        <label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
          username:
        </label>
        <input type="text" id="username" placeholder="_your_handle_here" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
      </div>

      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">
          password:
        </label>
        <input type="password" id="password" placeholder="_secret_chars_" class="shadow appearance-none border border-gray-400 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 focus:border-green-500 dark:focus:border-pink-500 transition-colors duration-200">
      </div>

      <div class="flex flex-col space-y-3">
        <button type="button" class="bg-green-500 hover:bg-green-600 dark:bg-pink-500 dark:hover:bg-pink-600 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
          LOGIN_()
        </button>
        <button type="button" class="bg-gray-700 hover:bg-gray-900 dark:bg-gray-200 dark:hover:bg-gray-50 text-white dark:text-gray-900 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition-colors duration-200 text-lg">
          SIGNUP_()
        </button>
      </div>

      <div class="mt-6 text-center text-sm">
        <a href="#" class="inline-block align-baseline font-bold text-green-500 hover:text-green-800 dark:text-pink-500 dark:hover:text-pink-800 transition-colors duration-200">
          _FORGOT_PW?
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 109 110 111 112 113 ... 335