Search Components

All Components

Browse all available Tailwind CSS components

Neon_Glow_Sepia_Photography_Accordion

A complex, responsive accordion component with a neon/glow effect in sepia/brown tones, designed for photography portfolios, featuring interactive elements and dark mode support.

Open Preview

                <div class="bg-zinc-100 dark:bg-zinc-900 min-h-screen p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 text-amber-900 dark:text-amber-500 tracking-tight leading-tight relative">
      <span class="relative inline-block">
        Photography Portfolios
        <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-20 blur-xl dark:from-amber-400 dark:to-amber-200 dark:opacity-30"></span>
      </span>
      <p class="text-base mt-2 font-normal text-amber-800 dark:text-amber-400 opacity-80">Explore our collection of captivating photographic works.</p>
    </h2>

    <div class="space-y-4">
      <!-- Accordion Item 1 -->
      <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
        <input type="checkbox" id="accordion-1" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
        <div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
          <h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
            Abstract Landscapes
            <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
          </h3>
          <svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-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="M19 9l-7 7-7-7"></path>
          </svg>
        </div>

        <div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
          <div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
            <p class="mb-4 text-sm sm:text-base">Dive into a world where light and shadow dance across vast, imagined terrains. This collection explores the intricate beauty of abstract landscapes through a sepia-toned lens, evoking a sense of timeless wonder.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
              <img src="https://picsum.photos/id/1040/300/200" alt="Abstract Landscape 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1043/300/200" alt="Abstract Landscape 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1045/300/200" alt="Abstract Landscape 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1047/300/200" alt="Abstract Landscape 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
                <span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Sarah 'Aura' Jenkins</span>
              </div>
              <a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
                View Gallery
                <span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Accordion Item 2 -->
      <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
        <input type="checkbox" id="accordion-2" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
        <div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
          <h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
            Urban Echoes
            <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
          </h3>
          <svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-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="M19 9l-7 7-7-7"></path>
          </svg>
        </div>

        <div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
          <div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
            <p class="mb-4 text-sm sm:text-base">Witness the soulful silence of cityscapes, captured in a symphony of sepia tones. Each image tells a story of the urban environment's raw beauty and untold narratives.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
              <img src="https://picsum.photos/id/1015/300/200" alt="Urban Echoes 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1025/300/200" alt="Urban Echoes 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1032/300/200" alt="Urban Echoes 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1033/300/200" alt="Urban Echoes 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/62.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
                <span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Alex 'Lens' Martinez</span>
              </div>
              <a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
                View Gallery
                <span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Accordion Item 3 -->
      <div class="group relative overflow-hidden rounded-xl bg-gradient-to-br from-amber-950 to-amber-900 p-1 shadow-2xl dark:from-zinc-800 dark:to-zinc-900 border border-amber-900 dark:border-amber-700 glow-effect-wrapper">
        <input type="checkbox" id="accordion-3" class="peer absolute top-0 inset-x-0 w-full h-16 opacity-0 z-10 cursor-pointer" />
        <div class="flex items-center justify-between p-4 sm:p-6 bg-amber-900 dark:bg-zinc-800 rounded-lg text-amber-100 dark:text-amber-50 relative z-0">
          <h3 class="text-xl sm:text-2xl font-bold tracking-wide relative">
            Ephemeral Moments
            <span class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-500 opacity-10 blur-md dark:from-amber-400 dark:to-amber-200 dark:opacity-20"></span>
          </h3>
          <svg class="w-6 h-6 transform transition-transform group-hover:scale-110 peer-checked:rotate-180 text-amber-300 dark:group-hover:text-amber-200 dark:text-amber-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="M19 9l-7 7-7-7"></path>
          </svg>
        </div>

        <div class="overflow-hidden transition-all duration-500 ease-in-out max-h-0 peer-checked:max-h-[1000px] pt-0 peer-checked:pt-6">
          <div class="p-4 sm:p-6 bg-amber-900/90 dark:bg-zinc-800/90 text-amber-200 dark:text-amber-100 rounded-b-lg">
            <p class="mb-4 text-sm sm:text-base">A collection dedicated to the fleeting, unrepeatable moments of life. These sepia-tinted images freeze time, inviting contemplation on the passage of beauty and memory.</p>
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
              <img src="https://picsum.photos/id/1062/300/200" alt="Ephemeral Moment 1" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1070/300/200" alt="Ephemeral Moment 2" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1074/300/200" alt="Ephemeral Moment 3" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
              <img src="https://picsum.photos/id/1077/300/200" alt="Ephemeral Moment 4" class="hidden sm:block w-full h-auto object-cover rounded-md shadow-lg border-2 border-amber-800 dark:border-amber-600 glow-on-hover" />
            </div>
            <div class="mt-4 flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Photographer Avatar" class="w-10 h-10 rounded-full border-2 border-amber-700 dark:border-amber-500 glow-on-hover" />
                <span class="ml-3 text-amber-300 dark:text-amber-200 font-semibold text-sm">Michael 'Shutter' Chen</span>
              </div>
              <a href="#" class="px-4 py-2 bg-amber-700 text-amber-50 rounded-full hover:bg-amber-600 transition-colors duration-300 shadow-md text-sm relative overflow-hidden group-hover:glow-button-effect">
                View Gallery
                <span class="absolute inset-0 bg-amber-500 opacity-0 blur-md group-hover:opacity-20 transition-opacity duration-300"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Custom Styles for Glow Effects -->
  <style>
    .glow-effect-wrapper::before {
      content: '';
      position: absolute;
      top: -20px; /* Adjust for glow spread */
      left: -20px;
      right: -20px;
      bottom: -20px;
      background: linear-gradient(45deg, var(--glow-start-color, #c2410c), var(--glow-end-color, #fbbf24));
      background-size: 400% 400%;
      animation: glowing 10s linear infinite;
      filter: blur(20px);
      opacity: 0;
      z-index: -1;
      transition: opacity 0.3s ease-in-out;
    }

    .glow-effect-wrapper:hover::before {
      opacity: var(--hover-glow-opacity, 0.4);
    }
    .dark .glow-effect-wrapper::before {
      background: linear-gradient(45deg, var(--dark-glow-start-color, #fbbf24), var(--dark-glow-end-color, #fed7aa));
    }

    .glow-on-hover {
      transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .glow-on-hover:hover {
      transform: scale(1.03);
      box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);
    }
    .dark .glow-on-hover:hover {
      box-shadow: 0 0 15px rgba(251, 191, 36, 0.6), 0 0 30px rgba(251, 191, 36, 0.4);
    }

    .group-hover\:glow-button-effect .bg-amber-500 {
      transition: opacity 0.3s ease-in-out;
    }

    @keyframes glowing {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
  </style>
  <!-- Tailwind JIT or custom config would handle these variables. Here for demonstration. -->
  <style>
    :root {
      --glow-start-color: #f59e0b; /* amber-500 */
      --glow-end-color: #fbbf24; /* amber-400 */
      --dark-glow-start-color: #f59e0b; /* amber-500 */
      --dark-glow-end-color: #fcd34d; /* amber-300 */
      --hover-glow-opacity: 0.3;
    }
    .dark:root {
      --glow-start-color: #f59e0b; /* amber-500 */
      --glow-end-color: #fcd34d; /* amber-300 */
    }
  </style>
</div>

Neumorphic Sports Breadcrumb

A complex, neumorphic breadcrumb navigation component designed for sports/fitness applications, featuring rich jewel tones and full responsiveness with dark mode support.

Open Preview

                <nav class="flex items-center justify-center p-4 bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-800 dark:to-gray-950 min-h-24 md:min-h-32 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark" aria-label="Breadcrumb">
  <ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
    <li>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
        Home
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <a href="#" class="flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-700 dark:focus:ring-emerald-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark group-hover:block">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="Team Avatar" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Athletics
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-emerald-600 dark:text-emerald-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <a href="#" class="flex items-center text-sapphire-700 dark:text-sapphire-300 hover:text-sapphire-900 dark:hover:text-sapphire-100 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-sapphire-700 dark:focus:ring-sapphire-300 rounded-full px-3 py-1 text-sm sm:text-base font-semibold shadow-outer-neumorphic-light dark:shadow-outer-neumorphic-dark active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark">
        <svg class="w-4 h-4 mr-1 sm:mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.472 2.72L14.75 5.442S13.435 7.15 11.25 7.203c-2.185.053-4.22-.924-4.22-.924S5.105 5.56 5.105 5.56L2.38 2.76A1 1 0 00.91 3.94l2.72 2.72c.983.983 2.87.983 2.87.983s-1.84.455-2.61.026a1 1 0 00-1.378 1.464l.6.6a1 1 0 001.4-.04c.77-.43 2.76 1.48 2.76 1.48s1.603 1.15 2.8 1.15c.57 0 1.1-.115 1.57-.31L16.06 17.5a1 1 0 001.41-1.41L11.53 10.74c.2-.47.31-1 .31-1.57 0-1.2-.4-2.22-1.15-2.8l1.48-1.48c.04.04.08.08.12.11l2.76 2.76a1 1 0 001.41-1.41l-2.72-2.72c-.983-.983-.983-2.87-.983-2.87s.455 1.84.026 2.61a1 1 0 001.464 1.378l.6-.6a1 1 0 00-.04-1.4C16.92 4.69 17.472 2.72 17.472 2.72zM15 6a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        Teams
      </a>
    </li>
    <li class="flex items-center">
      <svg class="flex-shrink-0 w-4 h-4 text-sapphire-600 dark:text-sapphire-400 mx-1 sm:mx-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      <span class="flex items-center text-ruby-700 dark:text-ruby-300 px-3 py-1 text-sm sm:text-base font-bold cursor-default shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark rounded-full">
        <img src="https://picsum.photos/id/1018/25/25" alt="Team Logo" class="w-5 h-5 sm:w-6 sm:h-6 rounded-full mr-1 object-cover shadow-md">
        Griffins Squad
      </span>
    </li>
  </ol>
</nav>

<style>
  /* Base light mode shadows */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff;
  }

  .shadow-outer-neumorphic-light {
    box-shadow: 5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff;
  }

  /* Base dark mode shadows */
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568;
  }

  .dark .shadow-outer-neumorphic-dark {
    box-shadow: 5px 5px 10px #1a202c, -5px -5px 10px #4a5568;
  }

  /* Jewel Tone Theme Colors (Examples - extend as needed in tailwind.config.js) */
  .text-emerald-700 { color: #047857; }
  .dark .text-emerald-300 { color: #6ee7b7; }
  .hover\:text-emerald-900:hover { color: #064e3b; }
  .dark .hover\:text-emerald-100:hover { color: #ecfdf5; }

  .focus\:ring-emerald-700:focus { --tw-ring-color: #047857; }
  .dark .focus\:ring-emerald-300:focus { --tw-ring-color: #6ee7b7; }

  .text-emerald-600 { color: #059669; }
  .dark .text-emerald-400 { color: #34d399; }

  .text-sapphire-700 { color: #1d4ed8; }
  .dark .text-sapphire-300 { color: #93c5fd; }
  .hover\:text-sapphire-900:hover { color: #1e3a8a; }
  .dark .hover\:text-sapphire-100:hover { color: #eff6ff; }

  .focus\:ring-sapphire-700:focus { --tw-ring-color: #1d4ed8; }
  .dark .focus\:ring-sapphire-300:focus { --tw-ring-color: #93c5fd; }

  .text-sapphire-600 { color: #2563eb; }
  .dark .text-sapphire-400 { color: #60a5fa; }

  .text-ruby-700 { color: #b91c1c; }
  .dark .text-ruby-300 { color: #fca5a5; }

  /* Background gradient Adjustments */
  .from-emerald-50 { background-image: linear-gradient(to bottom right, #effdf5, var(--tw-gradient-to, #d1fae5)); /* Tailwind default */}
  .to-teal-100 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #f0fdf4), #ccfbf1); /* Tailwind default */}

  .dark .from-gray-800 { background-image: linear-gradient(to bottom right, #2d3748, var(--tw-gradient-to, #2c313a)); /* Tailwind default */}
  .dark .to-gray-950 { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, #1a202c), #0f172a); /* Tailwind default */}

  /* Note: For full control and proper dark mode color overriding, define custom color palettes in tailwind.config.js */
  /* Example tailwind.config.js extension */
  /*
  module.exports = {
    darkMode: 'class',
    theme: {
      extend: {
        colors: {
          emerald: {
            50: '#effdf5',
            100: '#d1fae5',
            300: '#6ee7b7',
            400: '#34d399',
            600: '#059669',
            700: '#047857',
            800: '#065f46',
            900: '#064e3b'
          },
          sapphire: {
            50: '#eff6ff',
            100: '#dbeafe',
            300: '#93c5fd',
            400: '#60a5fa',
            600: '#2563eb',
            700: '#1d4ed8',
            800: '#1e40af',
            900: '#1e3a8a'
          },
          ruby: {
            50: '#fef2f2',
            100: '#fee2e2',
            300: '#fca5a5',
            400: '#ef4444',
            600: '#dc2626',
            700: '#b91c1c',
            800: '#991b1b',
            900: '#7f1d1d'
          }
        },
        boxShadow: {
          'inner-neumorphic-light': 'inset 5px 5px 10px #bfd6d0, inset -5px -5px 10px #ffffff',
          'outer-neumorphic-light': '5px 5px 10px #bfd6d0, -5px -5px 10px #ffffff',
          'inner-neumorphic-dark': 'inset 5px 5px 10px #1a202c, inset -5px -5px 10px #4a5568',
          'outer-neumorphic-dark': '5px 5px 10px #1a202c, -5px -5px 10px #4a5568'
        }
      }
    }
  }
  */
</style>

Skeuomorphic_Retro_Success_Message_Component

A moderate complexity success message component designed with a skeuomorphic, retro/vintage style, suitable for fashion/beauty brands. It includes responsive design and dark mode support.

Open Preview

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

  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-stone-700 dark:to-stone-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-[8px_8px_16px_rgba(0,0,0,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(60,60,60,0.4)] border border-yellow-300 dark:border-stone-600 transition-all duration-300 ease-in-out">

    <!-- Inner embossed area -->
    <div class="p-4 sm:p-6 bg-gradient-to-br from-yellow-50 dark:from-stone-800 to-yellow-100 dark:to-stone-900 rounded-2xl shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.1),inset_-4px_-4px_8px_rgba(255,255,255,0.5)] dark:shadow-inner-[inset_4px_4px_8px_rgba(0,0,0,0.4),inset_-4px_-4px_8px_rgba(80,80,80,0.3)] border border-yellow-200 dark:border-stone-700">

      <div class="text-center space-y-5 sm:space-y-6 md:space-y-8">
        <!-- Checkmark icon - Skeuomorphic style -->
        <div class="mx-auto w-24 h-24 sm:w-28 sm:h-28 flex items-center justify-center rounded-full bg-gradient-to-br from-lime-400 to-lime-600 dark:from-green-600 dark:to-green-800 shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] transition-all duration-300 ease-in-out">
          <svg class="w-14 h-14 sm:w-16 sm:h-16 text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.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.5" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>

        <h2 class="text-3xl sm:text-4xl font-bold text-teal-800 dark:text-teal-300 drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)] transition-colors duration-300">Order Confirmed!</h2>

        <p class="text-lg sm:text-xl text-amber-700 dark:text-amber-200 leading-relaxed drop-shadow-[0_1px_1px_rgba(0,0,0,0.05)] transition-colors duration-300">
          Your journey into timeless elegance has just begun. We've received your order and are preparing your exquisite selections. Thank you!
        </p>

        <div class="pt-4">
          <a href="#" class="inline-flex items-center justify-center px-8 py-3 sm:px-10 sm:py-4 text-lg sm:text-xl font-semibold rounded-full
             bg-gradient-to-br from-orange-400 to-orange-600 dark:from-red-600 dark:to-red-800 text-white 
             shadow-[6px_6px_12px_rgba(0,0,0,0.2),-6px_-6px_12px_rgba(255,255,255,0.7)] dark:shadow-[6px_6px_12px_rgba(0,0,0,0.5),-6px_-6px_12px_rgba(60,60,60,0.4)] 
             hover:from-orange-500 hover:to-orange-700 dark:hover:from-red-700 dark:hover:to-red-900 
             hover:shadow-[2px_2px_8px_rgba(0,0,0,0.2),-2px_-2px_8px_rgba(255,255,255,0.7)] 
             dark:hover:shadow-[2px_2px_8px_rgba(0,0,0,0.5),-2px_-2px_8px_rgba(60,60,60,0.4)] 
             transition-all duration-300 ease-in-out transform active:scale-95
             border border-orange-300 dark:border-red-500">
            Continue Browsing
          </a>
        </div>

      </div>
    </div>

    <!-- Decorative elements mimicking 'screws' or 'hinges' -->
    <div class="absolute -top-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
    <div class="absolute -top-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>
    <div class="absolute -bottom-3 -left-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full"></div></div>
    <div class="absolute -bottom-3 -right-3 w-6 h-6 bg-gray-300 dark:bg-stone-600 rounded-full shadow-md dark:shadow-lg border border-gray-400 dark:border-stone-500 flex items-center justify-center"><div class="w-2 h-2 bg-gray-400 dark:bg-stone-500 rounded-full rotate-45"></div></div>

  </div>
</div>

Gradient Rainbow Progress Bar for Photography

A complex, responsive progress bar component for photography portfolios, featuring a multi-color gradient rainbow design and dark mode support. Ideal for showcasing photo loading or gallery progression.

Open Preview

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-4 text-center">
        Loading Your Masterpiece Gallery
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-8 text-center">
        Please wait while we prepare your high-resolution photographs.
      </p>

      <div class="relative h-6 sm:h-8 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden shadow-inner mb-6">
        <div class="absolute inset-0 rounded-full animate-progress-rainbow-full" style="width: 75%;">
          <div class="h-full rounded-full" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #84cc16, #22c55e, #06b6d4, #3b82f6, #6366f1, #a855f7, #ec4899);"></div>
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="text-xs sm:text-sm font-semibold text-white dark:text-gray-100 mix-blend-difference">75% Complete</span>
        </div>
      </div>

      <div class="text-center text-sm text-gray-500 dark:text-gray-400">
        Preparing image: <span class="font-medium">'Sunset_Over_Mountains_HDR_001.jpg'</span>
      </div>

      <div class="mt-8 grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300">
          <img src="https://picsum.photos/id/1015/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 1</p>
          </div>
          <div class="absolute bottom-2 right-2 text-white text-xs bg-black/50 px-2 py-1 rounded-full">&#10003;</div>
        </div>
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300">
          <img src="https://picsum.photos/id/1084/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 2</p>
          </div>
          <div class="absolute bottom-2 right-2 text-white text-xs bg-black/50 px-2 py-1 rounded-full">&#10003;</div>

        </div>
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-blue-500 dark:border-blue-400 transition-all duration-300 shadow-md animate-pulse">
          <img src="https://picsum.photos/id/107/300/300" alt="Placeholder image" class="w-full h-full object-cover grayscale" loading="lazy">
          <div class="absolute inset-0 flex items-center justify-center bg-black/60">
            <div class="w-8 h-8 sm:w-10 sm:h-10 border-4 border-t-4 border-white border-t-white-500 rounded-full animate-spin"></div>
          </div>
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 3</p>
          </div>
        </div>
        <div class="relative w-full aspect-square rounded-lg overflow-hidden border-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 transition-all duration-300 opacity-60">
          <img src="https://picsum.photos/id/1069/300/300" alt="Placeholder image" class="w-full h-full object-cover" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end p-2 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <p class="text-white text-xs font-semibold">Image 4</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes progress-rainbow-full {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
  .animate-progress-rainbow-full {
    background-size: 200% 100%;
    animation: progress-rainbow-full 2s ease-in-out infinite alternate;
  }
</style>

Bauhaus Jewel Tone Navigation

A simple, functional navigation component with geometric forms and jewel tones, designed for booking/reservation systems. Features responsiveness and dark mode support.

Open Preview

                <nav class="bg-emerald-600 dark:bg-sapphire-900 p-4 shadow-lg">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <!-- Logo/Brand Section -->
    <div class="flex items-center mb-4 md:mb-0">
      <div class="w-8 h-8 bg-ruby-500 dark:bg-ruby-700 mr-2 transform rotate-45"></div>
      <a href="#" class="text-white text-2xl font-bold tracking-widest uppercase">Reserv<span class="text-ruby-300 dark:text-ruby-500">.</span></a>
    </div>

    <!-- Navigation Links -->
    <div class="relative flex flex-col md:flex-row items-center w-full md:w-auto">
      <!-- Mobile Menu Button (Hamburger) -->
      <button id="navbar-toggle" class="md:hidden absolute top-0 right-0 mr-4 text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-label="Toggle navigation">
        <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>

      <ul id="navbar-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0 w-full md:w-auto text-center md:text-left">
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            Home
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            Services
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-4 text-white hover:text-ruby-300 dark:hover:text-ruby-500 uppercase font-medium transition duration-300 ease-in-out border-b-2 border-transparent hover:border-ruby-300 dark:hover:border-ruby-500">
            About Us
          </a>
        </li>
      </ul>
    </div>

    <!-- Action Button -->
    <div class="mt-4 md:mt-0">
      <a href="#" class="inline-block px-6 py-2 bg-ruby-500 hover:bg-ruby-400 dark:bg-ruby-700 dark:hover:bg-ruby-600 text-white font-bold uppercase tracking-wider rounded-md transition duration-300 ease-in-out transform hover:scale-105 border-2 border-ruby-500 dark:border-ruby-700">
        Book Now
      </a>
    </div>
  </div>
  <script>
    // Simple JavaScript for mobile menu toggle
    document.addEventListener('DOMContentLoaded', function () {
      const navbarToggle = document.getElementById('navbar-toggle');
      const navbarMenu = document.getElementById('navbar-menu');

      navbarToggle.addEventListener('click', function () {
        navbarMenu.classList.toggle('hidden');
        navbarMenu.classList.toggle('flex');
        navbarMenu.classList.toggle('flex-col');
      });

      // Close menu when a link is clicked (for mobile)
      navbarMenu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
          if (window.innerWidth < 768) { // md breakpoint
            navbarMenu.classList.add('hidden');
            navbarMenu.classList.remove('flex');
            navbarMenu.classList.remove('flex-col');
          }
        });
      });

      // Close menu on resize if above mobile breakpoint
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 768) {
          navbarMenu.classList.remove('hidden');
          navbarMenu.classList.remove('flex');
          navbarMenu.classList.remove('flex-col');
        } else {
          navbarMenu.classList.add('hidden'); // Ensure it's hidden on mobile if resized from desktop
          navbarMenu.classList.remove('flex');
          navbarMenu.classList.remove('flex-col');
        }
      });
    });
  </script>
  <style>
    /* Custom tailwind color for dark mode (replace with actual tailwind.config.js extension) */
    .bg-sapphire-900 {
      background-color: #0A0A2A; /* Darker blue reminiscent of sapphire */
    }
    .text-sapphire-900 {
      color: #0A0A2A;
    }
    .bg-ruby-500 {
      background-color: #CC0033;
    }
    .hover\:bg-ruby-400:hover {
      background-color: #E6003D;
    }
    .dark\:bg-ruby-700 {
      background-color: #990022;
    }
    .dark\:hover\:bg-ruby-600:hover {
      background-color: #B30028;
    }
    .text-ruby-300 {
      color: #FF5C83;
    }
    .dark\:text-ruby-500 {
      color: #CC0033;
    }
    .hover\:text-ruby-300:hover {
      color: #FF5C83;
    }
    .dark\:hover\:text-ruby-500:hover {
      color: #CC0033;
    }
    .hover\:border-ruby-300:hover {
      border-color: #FF5C83;
    }
    .dark\:hover\:border-ruby-500:hover {
      border-color: #CC0033;
    }
    .border-ruby-500 {
      border-color: #CC0033;
    }
    .dark\:border-ruby-700 {
      border-color: #990022;
    }

    /* Primary Emerald for background */
    .bg-emerald-600 {
      background-color: #008060; 
    }
  </style>
</nav>

MemphisMapsComponent_CryptoBlockchain

A complex, responsive 'Memphis Design' inspired maps component for cryptocurrency/blockchain applications, featuring bold colors, geometric shapes, and a warm sunset color scheme. Includes dark mode support and interactive elements.

Open Preview

                <div class="font-sans min-h-screen bg-gradient-to-br from-orange-50 to-amber-100 text-gray-900 dark:from-gray-900 dark:to-gray-950 dark:text-gray-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in border-4 border-yellow-400 dark:border-purple-600 relative">
    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-300/60 to-orange-400/60 dark:from-purple-600/60 dark:to-violet-800/60 opacity-30 dark:opacity-20 z-0">
      <div class="absolute top-10 left-10 w-24 h-24 bg-red-400 dark:bg-pink-500 rounded-full animate-pulse-slow"></div>
      <div class="absolute bottom-20 right-20 w-32 h-16 bg-blue-400 dark:bg-cyan-500 transform -rotate-45"></div>
      <div class="absolute top-1/3 right-1/4 w-16 h-16 bg-green-300 dark:bg-lime-500 transform rotate-12"></div>
      <div class="absolute bottom-5 left-1/4 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-lg transform rotate-6"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-10 lg:grid lg:grid-cols-3 lg:gap-8">
      <!-- Left Sidebar - Controls & Filters -->
      <div class="lg:col-span-1 bg-amber-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border-2 border-orange-200 dark:border-purple-700 animate-slide-in-left mb-6 lg:mb-0">
        <h2 class="text-3xl font-extrabold mb-6 text-orange-700 dark:text-purple-400 border-b-4 border-orange-400 dark:border-purple-600 pb-2">Crypto Hub Explorer</h2>

        <div class="mb-6">
          <label for="search" class="block text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">Search Locations</label>
          <div class="relative">
            <input type="text" id="search" placeholder="Find Exchanges, ATMs, Meetups..." class="w-full p-3 pl-10 rounded-xl bg-orange-100 dark:bg-gray-600 border border-orange-300 dark:border-purple-800 focus:ring-2 focus:ring-yellow-400 focus:border-transparent transition-all pr-4 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-orange-500 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">Filter by Type</h3>
          <div class="grid grid-cols-2 gap-3">
            <label class="flex items-center space-x-2 cursor-pointer bg-yellow-200 dark:bg-lime-600 p-3 rounded-xl border-2 border-yellow-300 dark:border-lime-700 hover:bg-yellow-300 dark:hover:bg-lime-700 transition">
              <input type="checkbox" class="form-checkbox text-orange-500 dark:text-cyan-400 rounded-lg focus:ring-orange-400 h-6 w-6 border-2 border-orange-400 dark:border-cyan-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">Exchanges</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer bg-orange-200 dark:bg-purple-600 p-3 rounded-xl border-2 border-orange-300 dark:border-purple-700 hover:bg-orange-300 dark:hover:bg-purple-700 transition">
              <input type="checkbox" class="form-checkbox text-red-500 dark:text-pink-400 rounded-lg focus:ring-red-400 h-6 w-6 border-2 border-red-400 dark:border-pink-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">ATMs</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer bg-red-200 dark:bg-red-600 p-3 rounded-xl border-2 border-red-300 dark:border-red-700 hover:bg-red-300 dark:hover:bg-red-700 transition">
              <input type="checkbox" class="form-checkbox text-blue-500 dark:text-blue-400 rounded-lg focus:ring-blue-400 h-6 w-6 border-2 border-blue-400 dark:border-blue-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">Meetups</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer bg-blue-200 dark:bg-blue-600 p-3 rounded-xl border-2 border-blue-300 dark:border-blue-700 hover:bg-blue-300 dark:hover:bg-blue-700 transition">
              <input type="checkbox" class="form-checkbox text-green-500 dark:text-green-400 rounded-lg focus:ring-green-400 h-6 w-6 border-2 border-green-400 dark:border-green-500">
              <span class="text-sm font-medium text-gray-700 dark:text-gray-100">Miners</span>
            </label>
          </div>
        </div>

        <div class="mb-6">
          <h3 class="text-lg font-semibold mb-3 text-gray-800 dark:text-gray-200">Top 5 Hotspots</h3>
          <ul class="space-y-3">
            <li class="flex items-center justify-between p-3 bg-red-100 dark:bg-pink-700 rounded-xl border-2 border-red-200 dark:border-pink-800 animate-slide-in-right-item">
              <span class="text-gray-800 dark:text-gray-100 font-medium">New York, USA</span>
              <span class="text-sm text-red-600 dark:text-pink-300 bg-red-200 dark:bg-pink-800 px-3 py-1 rounded-full">+120% Activity</span>
            </li>
            <li class="flex items-center justify-between p-3 bg-blue-100 dark:bg-cyan-700 rounded-xl border-2 border-blue-200 dark:border-cyan-800 animate-slide-in-right-item animate-delay-100">
              <span class="text-gray-800 dark:text-gray-100 font-medium">London, UK</span>
              <span class="text-sm text-blue-600 dark:text-cyan-300 bg-blue-200 dark:bg-cyan-800 px-3 py-1 rounded-full">+95% Activity</span>
            </li>
            <li class="flex items-center justify-between p-3 bg-green-100 dark:bg-lime-700 rounded-xl border-2 border-green-200 dark:border-lime-800 animate-slide-in-right-item animate-delay-200">
              <span class="text-gray-800 dark:text-gray-100 font-medium">Dubai, UAE</span>
              <span class="text-sm text-green-600 dark:text-lime-300 bg-green-200 dark:bg-lime-800 px-3 py-1 rounded-full">+88% Activity</span>
            </li>
          </ul>
        </div>

        <button class="w-full py-4 bg-gradient-to-r from-orange-500 to-red-500 dark:from-purple-700 dark:to-violet-900 text-white font-bold rounded-xl shadow-lg border-2 border-orange-600 dark:border-purple-800 hover:from-orange-600 hover:to-red-600 dark:hover:from-purple-800 dark:hover:to-violet-950 transition transform hover:scale-105 active:scale-95 animate-bounce-in">
          <span class="flex items-center justify-center"><svg class="w-6 h-6 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="M9 20l-5-5m0 0l5-5m-5 5h12a2 2 0 002-2V7a2 2 0 00-2-2h-3L9 3V2a1 1 0 00-1-1H3a1 1 0 00-1 1v12a2 2 0 002 2h5v3z"></path></svg>Discover Hotspots</span>
        </button>
      </div>

      <!-- Main Content - Map & Location Details -->
      <div class="lg:col-span-2 space-y-8">
        <div class="relative bg-gray-200 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg aspect-w-16 aspect-h-9 sm:aspect-h-11 md:aspect-h-12 w-full border-4 border-orange-400 dark:border-purple-600 animate-zoom-in-map">
          <!-- Placeholder for the Map -->
          <img src="https://picsum.photos/seed/memphismap/1200/800" alt="Decentralized Crypto Map" class="w-full h-full object-cover rounded-2xl">
          <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
            <span class="text-white text-3xl font-bold flex flex-col items-center">
              <svg class="w-10 h-10 text-yellow-300 dark:text-green-400 mb-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg>
              <span class="text-white text-3xl font-bold">Decentralized Map View</span>
            </span>
            <!-- Example of dynamic markers -->
            <div class="absolute top-1/4 left-1/4 animate-bounce-marker"><svg class="w-8 h-8 text-red-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg><span class="absolute -top-6 left-1/2 -translate-x-1/2 text-white text-xs font-semibold px-2 py-0.5 bg-red-500 rounded-md">EXCHANGE</span></div>
            <div class="absolute top-2/3 right-1/3 animate-bounce-marker animate-delay-200"><svg class="w-8 h-8 text-yellow-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg><span class="absolute -top-6 left-1/2 -translate-x-1/2 text-white text-xs font-semibold px-2 py-0.5 bg-yellow-500 rounded-md">ATM</span></div>
          </div>
        </div>

        <!-- Recent Discoveries / Hotspot Details -->
        <div class="bg-orange-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border-2 border-red-300 dark:border-pink-800 animate-slide-in-right">
          <h3 class="text-2xl font-bold mb-4 text-red-700 dark:text-pink-400 border-b-4 border-red-400 dark:border-pink-600 pb-2">Featured Spot: BlockBuilders Inc.</h3>
          <div class="md:flex items-center space-y-4 md:space-y-0 md:space-x-6">
            <img src="https://picsum.photos/seed/cryptooffice/300/200" alt="BlockBuilders Inc." class="flex-shrink-0 w-full md:w-48 h-32 object-cover rounded-xl shadow-md border-2 border-orange-400 dark:border-purple-600">
            <div>
              <p class="text-gray-700 dark:text-gray-300 mb-2">Leading blockchain development hub and co-working space.</p>
              <div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
                <svg class="w-4 h-4 mr-1 text-red-500 dark:text-pink-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"></path></svg>
                <span>123 Chainlink Ave, Metropolis, CA</span>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Open Mon-Fri, 9 AM - 6 PM</p>
              <div class="flex space-x-3">
                <span class="px-3 py-1 bg-gradient-to-r from-yellow-300 to-orange-400 dark:from-purple-500 dark:to-pink-600 text-yellow-800 dark:text-white text-xs font-semibold rounded-full shadow-md">Development Hub</span>
                <span class="px-3 py-1 bg-gradient-to-r from-blue-300 to-cyan-400 dark:from-violet-500 dark:to-blue-600 text-blue-800 dark:text-white text-xs font-semibold rounded-full shadow-md">Community Meetups</span>
              </div>
            </div>
          </div>

          <div class="mt-6">
            <h4 class="text-xl font-bold mb-3 text-gray-800 dark:text-gray-200">Recent Activity</h4>
            <ul class="space-y-3">
              <li class="flex items-center space-x-3 bg-red-50 dark:bg-pink-900 p-3 rounded-lg border border-red-200 dark:border-pink-800 animate-pop-in">
                <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-400 dark:border-pink-500">
                <p class="text-gray-700 dark:text-gray-200 text-sm"><span class="font-semibold text-red-600 dark:text-pink-300">Alice Smith</span> checked in for 'ERC-20 Workshop'.</p>
                <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
              </li>
              <li class="flex items-center space-x-3 bg-blue-50 dark:bg-cyan-900 p-3 rounded-lg border border-blue-200 dark:border-cyan-800 animate-pop-in animate-delay-100">
                <img src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-cyan-500">
                <p class="text-gray-700 dark:text-gray-200 text-sm"><span class="font-semibold text-blue-600 dark:text-cyan-300">Bob Johnson</span> used the BTC ATM.</p>
                <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Tailwind CSS Keyframes for Animations -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.8s ease-out forwards;
  }

  @keyframes slide-in-left {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .animate-slide-in-left {
    animation: slide-in-left 0.7s ease-out forwards;
  }

  @keyframes slide-in-right {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .animate-slide-in-right {
    animation: slide-in-right 0.7s ease-out forwards;
  }

  @keyframes slide-in-right-item {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .animate-slide-in-right-item {
    animation: slide-in-right-item 0.4s ease-out forwards;
  }

  @keyframes zoom-in-map {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-zoom-in-map {
    animation: zoom-in-map 0.6s ease-out forwards;
  }

  @keyframes bounce-in {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
  }
  .animate-bounce-in {
    animation: bounce-in 0.5s ease-out forwards;
  }

  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-pop-in {
    animation: pop-in 0.4s ease-out forwards;
  }

  @keyframes bounce-marker {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  .animate-bounce-marker {
    animation: bounce-marker 1.5s infinite ease-in-out;
  }

  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
  }
  .animate-pulse-slow {
    animation: pulse-slow 3s infinite ease-in-out;
  }

  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }

  /* Aspect Ratio Utility (for map container) */
  .aspect-w-16 {
    position: relative;
    width: 100%;
  }
  .aspect-w-16::before {
    content: '';
    display: block;
    padding-bottom: calc(100% / (16 / 9));
  }
  .aspect-w-16 > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .aspect-h-9::before { padding-bottom: calc(100% / (16 / 9)); }
  @media (min-width: 640px) {
    .sm\:aspect-h-11::before { padding-bottom: calc(100% / (16 / 11)); }
  }
  @media (min-width: 768px) {
    .md\:aspect-h-12::before { padding-bottom: calc(100% / (16 / 12)); }
  }

  /* Custom Form Checkbox Styles */
  .form-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    user-select: none;
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 0.5rem; /* rounded-lg */
    border-width: 2px; /* border-2 */
    background-color: transparent;
    transition: background-color 0.2s, border-color 0.2s;
  }
  .form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 00-1.414 0L7 8.586 4.207 5.793a1 1 0 00-1.414 1.414l3.5 3.5a1 1 0 001.414 0l5-5a1 1 0 000-1.414z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
  .form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 181, 253, 0.5); /* example focus ring */
  }
  .form-checkbox.text-orange-500:checked {
    background-color: #f97316; /* orange-500 */
    border-color: #f97316;
  }
  .form-checkbox.text-red-500:checked {
    background-color: #ef4444; /* red-500 */
    border-color: #ef4444;
  }
  .form-checkbox.text-blue-500:checked {
    background-color: #3b82f6; /* blue-500 */
    border-color: #3b82f6;
  }
  .form-checkbox.text-green-500:checked {
    background-color: #22c55e; /* green-500 */
    border-color: #22c55e;
  }

  .dark .form-checkbox.text-cyan-400:checked {
    background-color: #22d3ee; /* cyan-400 */
    border-color: #22d3ee;
  }
  .dark .form-checkbox.text-pink-400:checked {
    background-color: #f472b6; /* pink-400 */
    border-color: #f472b6;
  }
  .dark .form-checkbox.text-blue-400:checked {
    background-color: #60a5fa; /* blue-400 */
    border-color: #60a5fa;
  }
  .dark .form-checkbox.text-green-400:checked {
    background-color: #4ade80; /* green-400 */
    border-color: #4ade80;
  }
</style>

Password Reset Component

A complex password reset component designed for government/public services, featuring a clean, minimalist typography-driven design with high contrast colors and full responsiveness, including dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col justify-center py-12 sm:px-6 lg:px-8 font-sans transition-colors duration-200">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 leading-tight tracking-tight sm:text-4xl">
            Reset Your Password
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400 max-w-sm mx-auto">
            Enter your email address below to receive a password reset link.
        </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white dark:bg-gray-800 py-8 px-4 shadow-lg rounded-lg sm:px-10 border border-gray-200 dark:border-gray-700">
            <form class="space-y-6" action="#" method="POST">
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Email address
                    </label>
                    <div class="mt-1 relative rounded-md shadow-sm">
                        <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 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 pr-10">
                        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M2.5 7A.5.5 0 013 6.5h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V7zm0 4.5A.5.5 0 013 11h14a.5.5 0 01.5.5v1.5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-1.5z" clip-rule="evenodd" />
                                <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 011 1v12a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM4.5 5.5a.5.5 0 00-.5.5v9a.5.5 0 00.5.5h11a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-11z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        Send reset link
                    </button>
                </div>
            </form>

            <div class="mt-6">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center" aria-hidden="true">
                        <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
                            Or
                        </span>
                    </div>
                </div>

                <div class="mt-6 space-y-4">
                    <a href="#" class="w-full flex justify-center py-2 px-4 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-indigo-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        <svg class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM6.75 9.25a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z" clip-rule="evenodd" />
                        </svg>
                        Back to Login
                    </a>
                    <a href="#" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50 hover:bg-blue-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 transition duration-150 ease-in-out">
                        <svg class="h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 10h-1.26A8 8 0 1010 4.09"></path>
                            <path d="M20.25 7.5l-2.75-2.75L15 7.5"></path>
                        </svg>
                        Contact Support
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Wishlist Component

A simple, responsive wishlist component with high-contrast color gradients and smooth transitions, suitable for business/corporate websites. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-sky-700 dark:to-indigo-700 text-white">
      <h2 class="text-2xl sm:text-3xl font-bold mb-2">Your Wishlist</h2>
      <p class="text-indigo-100 dark:text-sky-100 text-base sm:text-lg">Keep track of items you love and might want later.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Wishlist Item 1 -->
      <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
        <img src="https://picsum.photos/seed/wishlist1/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Premium Wireless Earbuds</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Crystal-clear sound and ergonomic design.</p>
          <span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$129.99</span>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
          <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
        <img src="https://picsum.photos/seed/wishlist2/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Ergonomic Desk Chair</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ultimate comfort for long working hours.</p>
          <span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$349.00</span>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
          <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out">
        <img src="https://picsum.photos/seed/wishlist3/100/100" alt="Product image" class="w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0 object-cover rounded-md shadow-sm mb-4 sm:mb-0 sm:mr-6">
        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 mb-1">Smart Home Hub</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Connect and control all your smart devices.</p>
          <span class="text-xl font-bold text-indigo-600 dark:text-teal-400">$89.50</span>
        </div>
        <div class="mt-4 sm:mt-0 sm:ml-4 flex-shrink-0">
          <button class="px-4 py-2 sm:px-5 sm:py-2.5 bg-indigo-500 hover:bg-indigo-600 dark:bg-sky-600 dark:hover:bg-sky-700 text-white rounded-md text-sm font-medium transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-sky-500 dark:focus:ring-offset-gray-800">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700 flex justify-end bg-gray-50 dark:bg-gray-800">
      <button class="px-6 py-3 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-semibold rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-800">
        Clear Wishlist
      </button>
    </div>
  </div>
</div>

Progress Indicators Component

A complex, monochromatic social media-themed progress indicators component with dark mode UI, featuring multiple progress bars, activity feed, and user avatars.

Open Preview

                <div class="min-h-screen bg-gray-950 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
  <div class="w-full max-w-4xl bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 sm:p-8 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-100 mb-2 dark:text-gray-100">Your Social Progress</h2>
      <p class="text-gray-400 text-sm sm:text-base dark:text-gray-400">Track your engagement and reach milestones.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 sm:p-8">
      <!-- Engagement Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Engagement Level</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-blue-600 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">75% Towards 'Influencer' Tier</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Points: 750/1000</span>
          <span>Next: 250</span>
        </div>
      </div>

      <!-- Post Reach Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Post Reach</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-purple-600 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">60% of Monthly Target</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Reached: 12K/20K</span>
          <span>Remaining: 8K</span>
        </div>
      </div>

      <!-- Profile Completion Progress -->
      <div class="bg-gray-850 p-5 rounded-lg dark:bg-gray-850">
        <h3 class="text-lg font-semibold text-gray-100 mb-3 dark:text-gray-100">Profile Completion</h3>
        <div class="w-full bg-gray-700 rounded-full h-3 dark:bg-gray-700">
          <div class="bg-green-600 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <p class="text-sm text-gray-400 mt-2 dark:text-gray-400">Almost perfect! Add a bio.</p>
        <div class="flex justify-between items-center text-gray-500 text-xs mt-3 dark:text-gray-500">
          <span>Complete: 9/10 fields</span>
          <span>Missing: 1</span>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 bg-gray-900 border-t border-gray-800 dark:bg-gray-900 dark:border-gray-800">
      <h3 class="text-xl font-semibold text-gray-100 mb-4 dark:text-gray-100">Recent Activity</h3>
      <ul class="space-y-4">
        <!-- Activity Item 1 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Alex Johnson</strong> liked your post "Summer Vibes".</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">2 hours ago</span>
          </div>
        </li>
        <!-- Activity Item 2 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">Maria T.</strong> commented on your photo.</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">5 hours ago</span>
          </div>
        </li>
        <!-- Activity Item 3 -->
        <li class="flex items-start">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-gray-700 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/21.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-200 text-sm dark:text-gray-200"><strong class="text-gray-50">David K.</strong> started following you.</p>
            <span class="text-gray-500 text-xs dark:text-gray-500">1 day ago</span>
          </div>
        </li>
      </ul>
    </div>

    <div class="p-6 sm:p-8 border-t border-gray-800 bg-gray-900 text-center dark:bg-gray-900 dark:border-gray-800">
      <button class="bg-blue-700 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200 dark:bg-blue-700 dark:hover:bg-blue-600">
        View Detailed Analytics
      </button>
    </div>
  </div>
</div>

Gradient_Weather_Buttons

A set of responsive buttons for weather forecasting and climate data, featuring a purple/violet gradient with smooth hover transitions and dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-black p-4">
  <div class="flex flex-col sm:flex-row gap-4 p-6 rounded-xl shadow-2xl bg-white dark:bg-gray-800 dark:shadow-purple-950/50 backdrop-blur-sm bg-opacity-80 dark:bg-opacity-70">

    <button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
      <span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-indigo-600 transition-all duration-500 ease-out group-hover:from-purple-600 group-hover:to-indigo-700"></span>
      <span class="relative z-10">Current Weather</span>
    </button>

    <button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
      <span class="absolute inset-0 bg-gradient-to-r from-violet-500 to-purple-600 transition-all duration-500 ease-out group-hover:from-violet-600 group-hover:to-purple-700"></span>
      <span class="relative z-10">7-Day Forecast</span>
    </button>

    <button class="relative group overflow-hidden px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 w-full sm:w-auto">
      <span class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-violet-600 transition-all duration-500 ease-out group-hover:from-indigo-600 group-hover:to-violet-700"></span>
      <span class="relative z-10">Climate Trends</span>
    </button>

  </div>
</div>

1 ... 60 61 62 63 64 ... 335

Search Components

Categories

All Components