Search Components

All Components

Browse all available Tailwind CSS components

Retro E-commerce Product Card Display

A complex, responsive e-commerce product display component with a retro/vintage 80s/90s aesthetic, featuring a purple/violet color scheme, interactive elements, and dark mode support.

Open Preview

                <div class="font-mono min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 text-purple-800 dark:from-purple-900 dark:via-blue-900 dark:to-indigo-900 dark:selection:bg-cyan-400 dark:text-purple-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="container mx-auto p-4 sm:p-8 bg-purple-200 dark:bg-purple-800 rounded-lg shadow-2xl border-4 border-indigo-500 dark:border-indigo-400 transform skew-y-1 shadow-purple-500/50 dark:shadow-purple-900/50">
    <div class="mb-8 text-center -skew-y-1">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-2 text-indigo-700 dark:text-indigo-300 tracking-wider uppercase drop-shadow-lg [text-shadow:_4px_4px_rgb(109_40_217_/_50%)] dark:[text-shadow:_4px_4px_rgb(99_102_241_/_30%)]">
        80s VIBE SHOP
      </h1>
      <p class="text-xl sm:text-2xl text-purple-600 dark:text-purple-300 font-semibold mb-6 italic">Unbox the Future, One Pixel at a Time</p>
    </div>

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

      <!-- Product Card 1 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300 group-hover:filter group-hover:brightness-110">
            <img src="https://picsum.photos/id/1043/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">RETRO GAMER DX</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Experience the thrill of classic gaming with this reimagined retro console! Comes with 100+ pre-installed games. Limited Edition purple variant!</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$89.99</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
            <img src="https://picsum.photos/id/338/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">CYBERPUNK HEADPHONES</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Immerse yourself in a world of pure sound. Neon light accents, booming bass, and comfortable earcups for all-day listening.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$129.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-yellow-500 dark:text-yellow-400 opacity-50" viewBox="0 0 24 24"><path d="M12 0l-3.09 6.26-6.91.99 5 4.88-1.18 6.91L12 18.23l6.23 3.28-1.18-6.91 5-4.88-6.91-.99L12 0z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-purple-300 dark:bg-purple-700 rounded-lg p-6 shadow-xl border-4 border-indigo-400 dark:border-indigo-500 relative overflow-hidden transform hover:scale-105 transition-transform duration-300 cube-effect">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-400/30 to-purple-400/30 dark:from-indigo-600/30 dark:to-purple-600/30 opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-3xl font-bold cursor-pointer z-10">
          <span class="animate-pulse">BUY NOW!</span>
        </div>
        <div class="relative z-20">
          <div class="mb-4 overflow-hidden rounded-md border-2 border-purple-500 dark:border-purple-300">
            <img src="https://picsum.photos/id/296/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-md transform transition-transform duration-300 hover:scale-110 pulse-glow">
          </div>
          <h2 class="text-2xl font-bold text-indigo-700 dark:text-indigo-300 mb-2 truncate">NEON CITY POSTER</h2>
          <p class="text-purple-700 dark:text-purple-200 mb-4 line-clamp-3">Illuminate your living space with this vibrant, high-quality art print. Featuring a quintessential 80s cityscape at dusk.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 drop-shadow-md">$29.50</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-5 h-5 fill-current text-gray-400 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279l-7.416-3.908-7.417 3.908 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <div class="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
            <button class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-indigo-500/50 dark:shadow-indigo-700/50 btn-glow">
              Add to Cart
            </button>
            <button class="flex-1 bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-4 rounded-md focus:outline-none focus:shadow-outline transform hover:scale-105 duration-200 shadow-lg shadow-purple-500/50 dark:shadow-purple-700/50 btn-glow">
              Details
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center -skew-y-1">
      <p class="text-lg sm:text-xl text-purple-600 dark:text-purple-300 font-semibold italic">Ready to step back into the future?</p>
      <button class="mt-4 inline-block bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-lg shadow-pink-500/50 dark:shadow-pink-700/50 uppercase tracking-wide transform hover:scale-105 duration-300 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 btn-glow">
        Browse All Products
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block ml-2 -mt-1" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Decorative elements -->
    <div class="absolute top-4 left-4 w-12 h-12 bg-pink-400 dark:bg-pink-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 0s;"></div>
    <div class="absolute bottom-4 right-4 w-8 h-8 bg-indigo-400 dark:bg-indigo-600 rounded-full animate-bounce" style="animation-duration: 3s; animation-delay: 1.5s;"></div>
    <div class="absolute top-1/4 right-1/4 w-6 h-6 bg-purple-500 dark:bg-purple-400 rounded-xl transform rotate-45 animate-spin-slow"></div>
    <div class="absolute bottom-1/3 left-1/4 w-10 h-10 bg-cyan-400 dark:bg-cyan-600 rounded-lg transform skew-x-12 animate-float"></div>

  </div>
</div>

<style>
  /* Adding some custom keyframe animations for retro feel */
  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 30px rgba(168, 85, 247, 0.5); }
  }

  .pulse-glow {
    animation: pulse-glow 3s infinite alternate;
  }

  @keyframes btn-glow {
    0%, 100% { outline: 2px solid transparent; }
    50% { outline: 2px solid theme('colors.purple.400'); outline-offset: 2px; }
  }

  .btn-glow:hover {
    animation: btn-glow 1s infinite alternate;
  }

  @keyframes cube-effect {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.01) rotate(0.5deg); }
    50% { transform: scale(1) rotate(0deg); }
    75% { transform: scale(1.01) rotate(-0.5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  .cube-effect {
    box-shadow: 8px 8px 0px theme('colors.indigo.500'), 16px 16px 0px theme('colors.pink.500');
    transition: all 0.3s ease-in-out;
  }

  .dark .cube-effect {
    box-shadow: 8px 8px 0px theme('colors.indigo.700'), 16px 16px 0px theme('colors.pink.700');
  }

  .cube-effect:hover {
    transform: translate(-4px, -4px) scale(1.02);
    box-shadow: 10px 10px 0px theme('colors.indigo.600'), 20px 20px 0px theme('colors.pink.600');
  }
  .dark .cube-effect:hover {
    box-shadow: 10px 10px 0px theme('colors.indigo.800'), 20px 20px 0px theme('colors.pink.800');
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-spin-slow {
    animation: spin-slow 10s linear infinite;
  }

  @keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

</style>

Skeuomorphic Charts Component

A complex, responsive charts component with a skeuomorphic design, warm neutral color scheme, and dark mode support, suitable for forum or community dashboards.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans antialiased text-stone-800 dark:text-stone-200 transition-colors duration-300">

  <div class="max-w-7xl mx-auto space-y-8">

    <!-- Header Section (Subtle Emboss Effect) -->
    <div class="relative p-4 md:p-6 rounded-xl shadow-xl transition-all duration-300
                bg-stone-50 dark:bg-stone-800
                dark:border-t dark:border-l dark:border-stone-700
                border-b border-r border-stone-200 dark:border-stone-900
                after:absolute after:inset-0 after:rounded-xl
                after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]">

      <h1 class="text-2xl sm:text-3xl font-bold text-stone-700 dark:text-stone-100 leading-tight select-none relative z-10">
        <span class="block">Community Insights</span>
        <span class="block text-base sm:text-lg font-normal text-stone-500 dark:text-stone-400">Dashboard Overview</span>
      </h1>

      <!-- Control Buttons (Pill-shaped, Pressed Effect) -->
      <div class="flex flex-wrap gap-3 mt-4 relative z-10">
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-200 hover:bg-stone-300 active:bg-stone-400
                       dark:bg-stone-700 dark:hover:bg-stone-600 dark:active:bg-stone-500
                       text-stone-700 dark:text-stone-300
                       shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.1),-2px_-2px_4px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.4),-2px_-2px_4px_rgb(0,0,0,0.2)]
                       active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Daily
        </button>
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-300
                       dark:bg-stone-600
                       text-stone-700 dark:text-stone-200
                       shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Weekly
        </button>
        <button class="relative px-4 py-2 rounded-full text-sm font-medium
                       bg-stone-200 hover:bg-stone-300 active:bg-stone-400
                       dark:bg-stone-700 dark:hover:bg-stone-600 dark:active:bg-stone-500
                       text-stone-700 dark:text-stone-300
                       shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.1),-2px_-2px_4px_rgb(255,255,255,0.7)]
                       dark:shadow-[inset_-1px_-1px_2px_rgb(0,0,0,0.4),-2px_-2px_4px_rgb(0,0,0,0.2)]
                       active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.1),inset_-2px_-2px_3px_rgb(255,255,255,0.7)]
                       dark:active:shadow-[inset_2px_2px_3px_rgb(0,0,0,0.4),inset_-2px_-2px_3px_rgb(0,0,0,0.2)]
                       transition-all duration-150">
          Monthly
        </button>
      </div>

    </div>

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

      <!-- Left Column - Main Charts -->
      <div class="lg:col-span-2 space-y-8">

        <!-- Large Chart Card (Overall Activity) -->
        <div class="relative p-4 md:p-6 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-stone-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-xl font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Total Engagements</h3>
          <div class="relative h-64 md:h-80 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                      shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                      dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                      relative z-10">
            <!-- Placeholder Chart - Mimic a line chart with gradients -->
            <div class="absolute bottom-0 left-0 right-0 h-4/5">
              <div class="absolute w-full h-full from-cream-400/50 via-warm-gray-400/50 to-beige-400/50 bg-gradient-to-t opacity-90"></div>
              <div class="absolute bottom-0 w-full h-1/5 bg-gradient-to-t from-orange-400/80 to-orange-300/80 rounded-t-full blur-sm opacity-70"></div>
            </div>
            <div class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-orange-500 to-orange-400 opacity-90"></div>

            <!-- Horizontal Grid Lines -->
            <div class="absolute inset-0 grid grid-rows-5 opacity-30">
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-b border-dashed border-stone-400 dark:border-stone-500"></div>
              <div></div>
            </div>
            <!-- Vertical Grid Lines -->
            <div class="absolute inset-0 grid grid-cols-7 opacity-30">
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div class="border-r border-dashed border-stone-400 dark:border-stone-500"></div>
              <div></div>
            </div>

            <!-- Example Data Points (Small raised circles) -->
            <div class="absolute p-1 top-1/3 left-1/4 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>
            <div class="absolute p-1 top-1/4 left-1/2 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>
            <div class="absolute p-1 top-1/2 left-3/4 translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500 shadow-[2px_2px_4px_rgb(0,0,0,0.3)] dark:shadow-[2px_2px_4px_rgb(0,0,0,0.6)]"></div>

          </div>
          <div class="mt-4 text-sm text-stone-600 dark:text-stone-300 relative z-10">
            <p><strong>+15%</strong> increase in engagements this week compared to last.</p>
          </div>
        </div>

        <!-- Small Chart Cards (Grid Layout) -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

          <!-- Replies Chart Card -->
          <div class="relative p-4 rounded-xl
                      bg-stone-100 dark:bg-stone-850
                      shadow-xl
                      dark:border-t dark:border-l dark:border-stone-700
                      border-b border-r border-stone-200 dark:border-stone-900
                      after:absolute after:inset-0 after:rounded-xl
                      after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                      dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                      transition-all duration-300">
            <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-3 relative z-10">Replies Posted</h3>
            <div class="relative h-40 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                        shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                        dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                        relative z-10">
              <!-- Placeholder Chart - Mimic a bar chart -->
              <div class="absolute bottom-0 left-0 right-0 flex items-end justify-around h-full p-2">
                <div class="w-1/6 h-2/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-3/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-4/5 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-2/3 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
                <div class="w-1/6 h-1/2 bg-gradient-to-t from-blue-400 to-blue-300 rounded-t-sm shadow-md"></div>
              </div>
            </div>
            <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
              <p><strong>2,120</strong> total replies this period.</p>
            </div>
          </div>

          <!-- New Topics Chart Card -->
          <div class="relative p-4 rounded-xl
                      bg-stone-100 dark:bg-stone-850
                      shadow-xl
                      dark:border-t dark:border-l dark:border-stone-700
                      border-b border-r border-stone-200 dark:border-stone-900
                      after:absolute after:inset-0 after:rounded-xl
                      after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                      dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                      transition-all duration-300">
            <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-3 relative z-10">New Topics</h3>
            <div class="relative h-40 w-full bg-stone-200 dark:bg-stone-700 rounded-lg overflow-hidden
                        shadow-[inset_2px_2px_4px_rgb(0,0,0,0.1),inset_-2px_-2px_4px_rgb(255,255,255,0.7)]
                        dark:shadow-[inset_2px_2px_4px_rgb(0,0,0,0.4),inset_-2px_-2px_4px_rgb(0,0,0,0.2)]
                        relative z-10">
              <!-- Placeholder Chart - Mimic a line chart -->
              <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                <defs>
                  <linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:rgb(70, 180, 70);stop-opacity:1" />
                    <stop offset="100%" style="stop-color:rgb(70, 180, 70);stop-opacity:0.3" />
                  </linearGradient>
                </defs>
                <polyline fill="url(#lineGradient)" stroke="rgb(70, 180, 70)" stroke-width="1.5"
                          points="0,80 20,60 40,75 60,50 80,65 100,40"
                          class="opacity-90 blur-sm brightness-125"
                          style="filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.3));" />
                <polyline fill="none" stroke="rgb(70, 180, 70)" stroke-width="2"
                          points="0,80 20,60 40,75 60,50 80,65 100,40" />
                <!-- Data Points -->
                <circle cx="0" cy="80" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="20" cy="60" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="40" cy="75" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="60" cy="50" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="80" cy="65" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
                <circle cx="100" cy="40" r="2" fill="rgb(70, 180, 70)" stroke="white" stroke-width="0.5" class="shadow-md" />
              </svg>
            </div>
            <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
              <p><strong>125</strong> new discussions started.</p>
            </div>
          </div>

        </div>
      </div>

      <!-- Right Column - User Stats & Leaderboard -->
      <div class="lg:col-span-1 space-y-8">

        <!-- Top Users Card -->
        <div class="relative p-4 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Top Users</h3>
          <ul class="space-y-4 relative z-10">
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Alice Johnson</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">560 Replies</p>
              </div>
            </li>
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Bob Smith</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">475 Replies</p>
              </div>
            </li>
            <li class="flex items-center gap-3">
              <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
              <div>
                <p class="font-medium text-stone-700 dark:text-stone-200">Carol White</p>
                <p class="text-sm text-stone-500 dark:text-stone-400">390 Replies</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- Active Members Card -->
        <div class="relative p-4 rounded-xl
                    bg-stone-100 dark:bg-stone-850
                    shadow-xl
                    dark:border-t dark:border-l dark:border-stone-700
                    border-b border-r border-stone-200 dark:border-stone-900
                    after:absolute after:inset-0 after:rounded-xl
                    after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.7),inset_-1px_-1px_3px_rgb(0,0,0,0.1)]
                    dark:after:shadow-[inset_1px_1px_3px_rgb(255,255,255,0.05),inset_-1px_-1px_3px_rgb(0,0,0,0.4)]
                    transition-all duration-300">
          <h3 class="text-lg font-semibold text-stone-700 dark:text-stone-100 mb-4 relative z-10">Active Members</h3>
          <div class="flex flex-wrap gap-2 relative z-10">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md ring-2 ring-blue-300 dark:ring-blue-600 border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md ring-2 ring-blue-300 dark:ring-blue-600 border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border border-stone-300 dark:border-stone-600" />
            <span class="w-12 h-12 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-600 text-stone-600 dark:text-stone-300 text-sm font-semibold shadow-md
                         border border-stone-300 dark:border-stone-600">+100</span>
          </div>
          <div class="mt-3 text-sm text-stone-600 dark:text-stone-300 relative z-10">
            <p><strong>12</strong> users online now.</p>
          </div>
        </div>

      </div>
    </div>

  </div>

</div>

Bauhaus_Grayscale_Rating_System_Component

A complex, responsive rating system component designed in a Bauhaus style with a grayscale color scheme, suitable for event and conference websites. Features interactive elements and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight tracking-tight text-center sm:text-left">
        Rate Your Experience at &ldquo;FutureTech Summit 2024&rdquo;
      </h2>
      <p class="text-md text-gray-600 dark:text-gray-400 text-center sm:text-left">
        Your feedback helps us improve future events. Please select your ratings below.
      </p>
    </div>

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

      <!-- Overall Satisfaction -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Overall Satisfaction</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <!-- Star 1 -->
          <div class="relative group">
            <input type="radio" id="overall-star-1" name="overall-satisfaction" class="hidden peer" value="1">
            <label for="overall-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Terrible">&#9733;</label>
          </div>
          <!-- Star 2 -->
          <div class="relative group">
            <input type="radio" id="overall-star-2" name="overall-satisfaction" class="hidden peer" value="2">
            <label for="overall-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Poor">&#9733;</label>
          </div>
          <!-- Star 3 -->
          <div class="relative group">
            <input type="radio" id="overall-star-3" name="overall-satisfaction" class="hidden peer" value="3">
            <label for="overall-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Average">&#9733;</label>
          </div>
          <!-- Star 4 -->
          <div class="relative group">
            <input type="radio" id="overall-star-4" name="overall-satisfaction" class="hidden peer" value="4">
            <label for="overall-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Good">&#9733;</label>
          </div>
          <!-- Star 5 -->
          <div class="relative group">
            <input type="radio" id="overall-star-5" name="overall-satisfaction" class="hidden peer" value="5">
            <label for="overall-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100" title="Excellent">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How would you rate your overall experience?</p>
      </div>

      <!-- Content Quality -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Content Quality</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="content-star-1" name="content-quality" class="hidden peer" value="1">
            <label for="content-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-2" name="content-quality" class="hidden peer" value="2">
            <label for="content-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-3" name="content-quality" class="hidden peer" value="3">
            <label for="content-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-4" name="content-quality" class="hidden peer" value="4">
            <label for="content-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="content-star-5" name="content-quality" class="hidden peer" value="5">
            <label for="content-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How valuable was the session content?</p>
      </div>

      <!-- Speaker Engagement -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Speaker Engagement</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="speaker-star-1" name="speaker-engagement" class="hidden peer" value="1">
            <label for="speaker-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-2" name="speaker-engagement" class="hidden peer" value="2">
            <label for="speaker-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-3" name="speaker-engagement" class="hidden peer" value="3">
            <label for="speaker-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-4" name="speaker-engagement" class="hidden peer" value="4">
            <label for="speaker-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="speaker-star-5" name="speaker-engagement" class="hidden peer" value="5">
            <label for="speaker-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How engaging and clear were the speakers?</p>
      </div>

      <!-- Venue & Logistics -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Venue & Logistics</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="venue-star-1" name="venue-logistics" class="hidden peer" value="1">
            <label for="venue-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-2" name="venue-logistics" class="hidden peer" value="2">
            <label for="venue-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-3" name="venue-logistics" class="hidden peer" value="3">
            <label for="venue-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-4" name="venue-logistics" class="hidden peer" value="4">
            <label for="venue-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="venue-star-5" name="venue-logistics" class="hidden peer" value="5">
            <label for="venue-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">How was the venue and event organization?</p>
      </div>

      <!-- Networking Opportunities -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Networking Opportunities</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="network-star-1" name="networking-opportunities" class="hidden peer" value="1">
            <label for="network-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-2" name="networking-opportunities" class="hidden peer" value="2">
            <label for="network-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-3" name="networking-opportunities" class="hidden peer" value="3">
            <label for="network-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-4" name="networking-opportunities" class="hidden peer" value="4">
            <label for="network-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="network-star-5" name="networking-opportunities" class="hidden peer" value="5">
            <label for="network-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Were there sufficient networking chances?</p>
      </div>

      <!-- Value for Money -->
      <div class="flex flex-col border border-gray-300 dark:border-gray-600 rounded-md p-5 bg-gray-100 dark:bg-gray-750 transform transition-transform duration-200 hover:scale-[1.02] active:scale-100">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Value for Money</h3>
        <div class="flex justify-center items-center space-x-2 sm:space-x-4 mb-4">
          <div class="relative group">
            <input type="radio" id="value-star-1" name="value-for-money" class="hidden peer" value="1">
            <label for="value-star-1" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-2" name="value-for-money" class="hidden peer" value="2">
            <label for="value-star-2" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-3" name="value-for-money" class="hidden peer" value="3">
            <label for="value-star-3" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-4" name="value-for-money" class="hidden peer" value="4">
            <label for="value-star-4" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
          <div class="relative group">
            <input type="radio" id="value-star-5" name="value-for-money" class="hidden peer" value="5">
            <label for="value-star-5" class="cursor-pointer text-gray-400 dark:text-gray-500 text-3xl sm:text-4xl transition-colors duration-200 peer-checked:text-yellow-500 peer-hover:text-yellow-400 peer-checked:dark:text-yellow-400 peer-hover:dark:text-yellow-300 transform scale-90 group-hover:scale-100">&#9733;</label>
          </div>
        </div>
        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Did the event offer good value for its cost?</p>
      </div>

    </div>

    <div class="p-6 sm:p-8 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Additional Feedback</h3>
      <textarea class="w-full p-3 sm:p-4 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 resize-y min-h-[100px] transition-colors duration-200" placeholder="Please share any other thoughts or suggestions..."></textarea>

      <div class="mt-6 flex justify-end">
        <button type="submit" class="px-6 py-3 bg-black text-white font-semibold rounded-md shadow-md hover:bg-gray-800 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900 transition-all duration-300 ease-in-out transform hover:scale-[1.02] active:scale-100">
          Submit Feedback
        </button>
      </div>
    </div>
  </div>
</div>

Gradient Agriculture Sidebar

A simple, responsive sidebar component with a monochromatic gradient design, suitable for agriculture and farming websites. Includes dark mode support.

Open Preview

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <aside class="flex flex-col w-64 bg-gradient-to-br from-green-500 to-emerald-700 text-white shadow-lg dark:from-green-700 dark:to-emerald-900 transition-all duration-300 ease-in-out">
    <div class="flex items-center justify-center h-20 border-b border-green-600 dark:border-green-800">
      <h1 class="text-3xl font-bold tracking-wide transition-colors duration-300 dark:text-gray-100">AgriHub</h1>
    </div>
    <nav class="flex-1 py-6 space-y-2 overflow-y-auto custom-scrollbar">
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
        </svg>
        Dashboard
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" 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 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>
        Crop Management
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Livestock
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" 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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
        </svg>
        Resources
      </a>
      <a href="#" class="flex items-center py-3 px-6 text-lg font-medium hover:bg-green-600 hover:bg-opacity-50 transition-colors duration-200 ease-in-out group">
        <svg class="w-6 h-6 mr-4 text-green-100 group-hover:text-white transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        Settings
      </a>
    </nav>
    <div class="p-6 border-t border-green-600 dark:border-green-800">
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-200 dark:border-green-400 object-cover" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
        <div>
          <p class="font-semibold text-green-50 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-green-100 dark:text-gray-300">Admin</p>
        </div>
      </div>
    </div>
  </aside>
  <main class="flex-1 p-6 lg:p-10 overflow-y-auto custom-scrollbar">
    <h2 class="text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 transition-colors duration-300">Welcome to AgriHub!</h2>
    <p class="text-gray-700 dark:text-gray-300 text-lg mb-8 transition-colors duration-300">Manage your farm operations efficiently and effectively.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Total Crops</h3>
        <p class="text-4xl font-bold text-green-600 dark:text-green-400">120 Acres</p>
        <img src="https://picsum.photos/id/101/400/250" alt="Field View" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Livestock Count</h3>
        <p class="text-4xl font-bold text-green-600 dark:text-green-400">345 Heads</p>
        <img src="https://picsum.photos/id/200/400/250" alt="Livestock" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-300">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Recent Activity</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Harvested Wheat (5 days ago)</li>
          <li>Fertilized Corn Field (2 days ago)</li>
          <li>Cattle vaccinated (yesterday)</li>
        </ul>
        <img src="https://picsum.photos/id/300/400/250" alt="Farm Activity" class="mt-4 rounded-lg object-cover w-full h-40">
      </div>
    </div>
  </main>
</div>

<style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }

  /* Dark mode scrollbar */
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
  }

  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6);
  }

  /* For responsiveness, adjust sidebar width on smaller screens */
  @media (max-width: 768px) {
    aside {
      width: 100%;
      height: auto;
      position: relative; /* Allow sidebar to stack */
      flex-direction: row; /* Stack items horizontally on mobile */
      flex-wrap: wrap; /* Allow wrapping */
      justify-content: space-around; /* Distribute items */
      padding-top: 0;
      padding-bottom: 0;
    }

    aside div:first-child {
      display: none; /* Hide logo/title on very small screens if desired */
    }

    aside nav {
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      padding-top: 1rem;
      padding-bottom: 1rem;
      width: 100%;
    }

    aside nav a {
      min-width: 120px;
      justify-content: center;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    aside nav a svg {
        margin-right: 0.5rem;
    }

    aside div:last-child {
      display: none; /* Hide user info on very small screens */
    }

    main {
      padding: 1rem;
    }
  }
</style>

CyberpunkLikeReactionButtons

A simple, responsive like/reaction buttons component for a marketplace, featuring a cyberpunk aesthetic with ocean blue tones and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 bg-gray-900 border border-blue-900 shadow-lg rounded-xl dark:bg-gray-950 dark:border-blue-950">
  <div class="flex justify-around items-center space-x-2">
    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Like</span>
      <span class="text-sm text-blue-500 group-hover:text-blue-300 transition-colors duration-300">2.5K</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2h8l3-3 3 3v6z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Save</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 8a3 3 0 10-2.977-2.977L5.582 12.02A3 3 0 1010.42.977l6.467 6.467a3 3 0 10-.98.98L9.02 8.02A3 3 0 1015 8z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Share</span>
    </button>
  </div>
</div>

OAuth Buttons Component

Simple, responsive OAuth buttons component with a watercolor/artistic style, cool neutral color scheme, suitable for e-commerce applications. Includes dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gradient-to-br from-blue-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">

  <div class="w-full max-w-sm p-6 rounded-2xl shadow-xl backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/70 dark:from-gray-700/80 dark:to-gray-800/70 border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105">

    <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
      Continue Shopping
    </h2>

    <p class="text-sm text-gray-600 dark:text-gray-300 mb-8 text-center leading-relaxed">
      Sign in or create an account to personalize your experience.
    </p>

    <div class="space-y-4">
      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12.24 10.24v3.53h4.63c-.19 1.13-.76 2.39-1.92 3.12-1.28.84-2.73 1.25-4.22 1.25-3.3 0-6.1-1.78-7.58-4.44C-.03 11.23-.42 8.78.36 6.55c.78-2.23 2.51-3.83 4.8-4.49 2.29-.66 4.77-.3 6.64 1.16 1.48 1.18 2.37 2.82 2.37 4.54h-3.69c0-.49-.15-.97-.43-1.37-.28-.4-.68-.7-1.14-.88-.46-.18-.96-.2-1.46-.06-.5.14-.95.43-1.26.83-.3.4-.46.9-.46 1.42 0 .52.16 1.02.46 1.42.31.4.76.69 1.26.83.5.14 1 .12 1.46-.06.46-.18.86-.48 1.14-.88.29-.4.43-.88.43-1.37h3.69v.01z"/><path d="M22.02 12.02a9 9 0 01-1.85 5.56 8.97 8.97 0 01-5.56 1.85 8.98 8.98 0 01-5.56-1.85 8.97 8.97 0 01-1.85-5.56 8.97 8.97 0 011.85-5.56 8.98 8.98 0 015.56-1.85 8.97 8.97 0 015.56 1.85 8.97 8.97 0 011.85 5.56z" fill="#4285F4"/><circle cx="12" cy="12" r="1" fill="#EA4335"/><circle cx="12" cy="12" r="1" fill="#FBBC05"/><circle cx="12" cy="12" r="1" fill="#34A853"/>
        </svg>
        Continue with Google
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm3.535 7.424c.007-.058.012-.116.012-.175 0-.114-.009-.228-.027-.341-.019-.114-.047-.225-.084-.336-.037-.11-.082-.218-.137-.324-.055-.106-.12-.21-.194-.31-.1-.137-.215-.262-.345-.38-.073-.066-.15-.128-.231-.188-.082-.06-.168-.116-.258-.168-.09-.052-.18-.098-.276-.142-.096-.044-.196-.084-.3-.122-.104-.038-.21-.072-.32-.102-.11-.03-.22-.054-.333-.075C12.333 4.015 12.167 4 12 4c-.167 0-.333.015-.5.045-.167.03-.328.077-.487.14-.158.062-.314.137-.468.225-.154.088-.302.19-.444.3-.142.11-.277.23-.404.36-.127.13-.245.267-.354.41-.11.14-.21.285-.3.435-.09.15-.17.3-.24.456-.07.156-.128.318-.175.485-.047.167-.08.338-.097.51-.017.172-.025.345-.025.518V9h4.375c.007.575.127 1.137.362 1.687.235.55.57.994 1.006 1.332.437.337.954.544 1.55.625.596.08 1.205.042 1.826-.115s1.207-.406 1.748-.777c.541-.37.97-.837 1.286-1.398ZM12 20.915c-1.378-.002-2.738-.29-4.025-.865-1.287-.575-2.482-1.418-3.535-2.496C3.36 16.486 2.518 15.29 1.94 14.004c-.57-1.287-.85-2.646-.848-4.025h4.375v2.85c0 .038.003.076.009.114.006.038.014.076.024.114.01.038.022.074.037.11.015.036.032.07.052.103.02.034.043.065.068.094.026.029.054.056.09.08.035.025.074.047.116.066.042.02.086.037.133.053.047.016.095.028.145.038l.15.018c.074.008.15.006.225-.005.075-.01.15-.025.22-.045.07-.02.138-.047.2-.08.062-.033.12-.07.17-.11.05-.04.094-.084.13-.13.036-.046.064-.093.085-.14.02-.047.034-.095.04-.145.006-.05.008-.1.008-.15l-.015-3.05h4.375V15h-4.375c-.328-.01-.65-.015-.968-.016-.318-.001-.637.003-.95.012-.313.009-.623.027-.93.053-.306.026-.607.062-.9.109-.292.048-.578.106-.856.175-.278.07-.547.15-.805.245-.257.095-.505.2-.74.31-.236.11-.46.223-.672.34-.212.118-.41.24-.59.366-.18.125-.347.252-.5.378-.153.126-.29.25-.407.37-.118.12-.224.238-.317.355-.094.116-.174.23-.238.34-.065.11-.115.215-.15.318-.035.103-.053.204-.055.305v.23h12.5v-2.85z"/>
        </svg>
        Continue with Apple
      </button>

      <button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
        <span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22.02 0H1.98A1.981 1.981 0 000 1.98v20.04c0 1.093.887 1.98 1.98 1.98h20.04c1.093 0 1.98-.887 1.98-1.98V1.98A1.981 1.981 0 0022.02 0zm-3.05 7.82c-.372 0-.677-.31-.677-.69-.001-.38.304-.69.676-.69.373 0 .677.31.677.69s-.304.69-.676.69zm-1.808 1.91h3.048c.082.91-.497 2.103-1.637 2.103-1.077 0-1.572-.75-1.41-1.53-.001-.001-.001-.002-.001-.003zm-3.23 3.99c.045.029.091.05.138.064l-.062-.02c-.062.01-.122.02-.184.02-.123-.002-.24-.03-.35-.07l-.02-.01-.06-.04c-.05-.03-.098-.06-.145-.1l-.06-.03-.04-.02c-.04-.03-.07-.05-.11-.08l-.07-.04c-.04-.02-.08-.05-.11-.07-.04-.02-.07-.04-.1-.06s-.06-.03-.08-.04l-.04-.02a.208.2088 20.8 1.02c.005.002.01.004.015.006.002.001.004.002.006.003l.006.002h.001a.36.36 0 01.02.01c.01.003.02.006.03.009l.067.02c-.01-.004-.02-.007-.03-.01v.001A.256.2560 25.6 0 0113.88 13.7l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46-.09-.17-.16-.34-.21-.52-.05-.19-.08-.37-.08-.57s.0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05c.001.001.001.002.001.003l-.001.001a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001z"/>
        </svg>
        Continue with Facebook
      </button>
    </div>

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

    <form class="space-y-4">
      <div>
        <label for="email" class="sr-only">Email address</label>
        <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-gray-900 dark:text-white bg-white dark:bg-gray-800 transition-colors duration-200 text-sm" placeholder="Email address">
      </div>
      <button type="submit" class="w-full flex justify-center px-6 py-3 border border-transparent rounded-xl shadow-sm text-base font-medium text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 ">
        Continue with Email
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
      By continuing, you agree to our <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Terms of Service</a> and <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Privacy Policy</a>.
    </p>
  </div>

</div>

Neumorphic_Fashion_Form

A complex, responsive, neumorphic form component with a muted/desaturated color scheme, designed for fashion and beauty brands, featuring multiple interactive elements and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-200 p-4 sm:p-8 flex items-center justify-center font-sans dark:bg-gray-800 transition-colors duration-300">
  <div class="w-full max-w-4xl bg-gray-200 rounded-3xl shadow-neumorphic-light-xl p-6 sm:p-10 md:p-12 transition-all duration-300 dark:bg-gray-800 dark:shadow-neumorphic-dark-xl">
    <h2 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-700 mb-8 text-center dark:text-gray-200">
      Elevate Your Style Profile
    </h2>

    <form action="#" method="POST">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
        <!-- Personal Information Section -->
        <div class="col-span-full mb-4">
          <h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Personal Details</h3>
        </div>

        <!-- First Name -->
        <div>
          <label for="first-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">First Name</label>
          <input type="text" id="first-name" name="first-name" placeholder="Jane" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Last Name -->
        <div>
          <label for="last-name" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Last Name</label>
          <input type="text" id="last-name" name="last-name" placeholder="Doe" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Email Address -->
        <div class="md:col-span-2">
          <label for="email" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full p-3 bg-gray-200 rounded-xl shadow-neumorphic-inset-light placeholder:text-gray-400 focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:placeholder:text-gray-500 dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200">
        </div>

        <!-- Styling Preferences Section -->
        <div class="col-span-full mt-6 mb-4">
          <h3 class="text-xl sm:text-2xl font-medium text-gray-600 mb-4 dark:text-gray-300">Styling Preferences</h3>
        </div>

        <!-- Style Category Multi-select -->
        <div class="md:col-span-2">
          <label for="style-category" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Style Categories</label>
          <div class="relative">
            <select multiple id="style-category" name="style-category[]" class="w-full p-3 pr-10 appearance-none bg-gray-200 rounded-xl shadow-neumorphic-inset-light focus:outline-none focus:shadow-neumorphic-active-light dark:bg-gray-800 dark:shadow-neumorphic-inset-dark dark:text-gray-200 dark:focus:shadow-neumorphic-active-dark transition-all duration-200 h-32 sm:h-auto min-h-[100px] sm:min-h-0">
              <option value="casual">Casual Chic</option>
              <option value="boho">Bohemian Rhapsody</option>
              <option value="minimalist">Minimalist Elegance</option>
              <option value="glam">Glamour & Evening</option>
              <option value="sporty">Sporty Luxe</option>
              <option value="vintage">Vintage Charm</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500 dark:text-gray-400">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 6.757 7.586 5.343 9z"/></svg>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2 dark:text-gray-500">Hold Ctrl/Cmd to select multiple options.</p>
        </div>

        <!-- Body Type Radios -->
        <div>
          <label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Body Type</label>
          <div class="space-y-3">
            <div class="flex items-center">
              <input type="radio" id="hourglass" name="body-type" value="hourglass" class="hidden peer">
              <label for="hourglass" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Hourglass
              </label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="rectangle" name="body-type" value="rectangle" class="hidden peer">
              <label for="rectangle" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Rectangle
              </label>
            </div>
            <div class="flex items-center">
              <input type="radio" id="pear" name="body-type" value="pear" class="hidden peer">
              <label for="pear" class="w-full px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:hover:shadow-neumorphic-active-dark">
                Pear
              </label>
            </div>
          </div>
        </div>

        <!-- Preferred Colors Checkbox Group -->
        <div>
          <label class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Preferred Color Palette</label>
          <div class="grid grid-cols-2 gap-3">
            <div class="flex items-center select-none">
              <input type="checkbox" id="neutral" name="colors[]" value="neutral" class="hidden peer">
              <label for="neutral" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Neutrals</span>
              </label>
            </div>
            <div class="flex items-center select-none">
              <input type="checkbox" id="pastels" name="colors[]" value="pastels" class="hidden peer">
              <label for="pastels" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Pastels</span>
              </label>
            </div>
             <div class="flex items-center select-none">
              <input type="checkbox" id="bold" name="colors[]" value="bold" class="hidden peer">
              <label for="bold" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Bold Hues</span>
              </label>
            </div>
            <div class="flex items-center select-none">
              <input type="checkbox" id="earth" name="colors[]" value="earth" class="hidden peer">
              <label for="earth" class="w-full relative px-4 py-2 border border-gray-300 rounded-xl cursor-pointer text-gray-600 block shadow-neumorphic-light text-center peer-checked:shadow-neumorphic-inset-light peer-checked:bg-gray-200 peer-checked:text-indigo-600 hover:shadow-neumorphic-active-light transition-all duration-200 dark:text-gray-300 dark:border-gray-600 dark:shadow-neumorphic-dark dark:peer-checked:shadow-neumorphic-inset-dark dark:peer-checked:bg-gray-800 dark:peer-checked:text-indigo-400 dark:hover:shadow-neumorphic-active-dark">
                <span class="relative z-10">Earth Tones</span>
              </label>
            </div>
          </div>
        </div>

        <!-- Upload Inspiration Images -->
        <div class="md:col-span-2 mt-6">
          <label for="inspiration-upload" class="block text-sm font-medium text-gray-500 mb-2 dark:text-gray-400">Upload your style inspiration (optional)</label>
          <div class="flex justify-center items-center h-48 sm:h-56 border-2 border-dashed border-gray-300 rounded-xl shadow-neumorphic-inset-light p-4 dark:border-gray-600 dark:shadow-neumorphic-inset-dark">
            <div class="text-center">
              <svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8c0 4.418-4.477 8-10 8H12M28 8a4 4 0 00-4-4H12a4 4 0 00-4 4m20 0v12m4-8h-4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                <label for="inspiration-upload" class="relative cursor-pointer font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">
                  <span>Upload a file</span>
                  <input id="inspiration-upload" name="inspiration-upload" type="file" class="sr-only">
                </label>
                or drag and drop
              </p>
              <p class="text-xs text-gray-500 dark:text-gray-500">PNG, JPG, GIF up to 10MB</p>
            </div>
          </div>
        </div>

        <!-- Newsletter Opt-in Toggle -->
        <div class="col-span-full mt-6">
           <div class="flex items-center justify-between py-3 px-4 rounded-xl shadow-neumorphic-light text-gray-700 dark:bg-gray-800 dark:shadow-neumorphic-dark transition-all duration-200">
            <span class="text-base font-medium dark:text-gray-200">Receive personalized fashion tips</span>
            <label for="newsletter-toggle" class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" id="newsletter-toggle" name="newsletter-optin" value="true" class="sr-only peer">
              <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 dark:bg-gray-600 transition-all duration-200">
              </div>
            </label>
          </div>
        </div>

      </div>

      <!-- Submit Button -->
      <div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-700 flex justify-center">
        <button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-full text-lg font-semibold text-white bg-indigo-500 shadow-neumorphic-button-light hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 focus:ring-indigo-500 dark:bg-indigo-700 dark:shadow-neumorphic-button-dark dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800 dark:focus:ring-indigo-700 transition-all duration-200">
          Update Profile
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom Tailwind CSS Shadow Utilities for Neumorphism */
  /* Light Mode Shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-light-xl {
    box-shadow: 10px 10px 20px #a3a3a3, -10px -10px 20px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-active-light {
    box-shadow: inset 3px 3px 6px #b0b0b0, inset -3px -3px 6px #ffffff;
  }
  .shadow-neumorphic-button-light {
    box-shadow: 6px 6px 12px rgba(99, 102, 241, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.7);
  }

  /* Dark Mode Shadows */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #262626;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 10px 10px 20px #3d3d3d, -10px -10px 20px #2f2f2f;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #262626;
  }
  .dark .shadow-neumorphic-active-dark {
    box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #262626;
  }
   .dark .shadow-neumorphic-button-dark {
    box-shadow: 6px 6px 12px rgba(67, 56, 202, 0.5), -6px -6px 12px rgba(118, 97, 246, 0.4);
  }

  /* Custom styling for multiselect to hide default arrow on some browsers */
  select[multiple]::-ms-expand {
    display: none;
  }
  select[multiple] {
    -webkit-appearance: none; /* For WebKit browsers */
    -moz-appearance: none;    /* For Gecko browsers */
    appearance: none;         /* Standard property */
  }

</style>

Product Gallery Component

A complex, responsive product gallery component with a 3D design aesthetic and sepia/brown color scheme, suitable for Technology/SaaS applications. Includes multiple interactive elements and dark mode support.

Open Preview

                <section class="bg-stone-100 dark:bg-stone-900 py-12 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-stone-900 dark:text-stone-100 mb-16 relative perspective-1000" style="text-shadow: 2px 2px 5px rgba(0,0,0,0.2) dark:text-stone-100; transform-style: preserve-3d;">
      <span class="block transform rotateX-15 rotateY-5 translateZ-20 bg-clip-text text-transparent bg-gradient-to-br from-amber-800 to-amber-950 dark:from-amber-600 dark:to-amber-900">Our Showcase</span>
      <span class="block text-2xl sm:text-3xl text-stone-700 dark:text-stone-300 mt-4 font-normal tracking-wide transform rotateX-10 translateZ-10">Explore Solutions with Depth</span>
    </h2>

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

      <!-- Product Card 1 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:rotate-3 hover:skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/60/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1015/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Data Insight Engine</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Uncover hidden patterns and make data-driven decisions with unparalleled precision and speed.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$499/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:-rotate-3 hover:-skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/61/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1018/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Cloud Security Hub</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Protect your cloud infrastructure with advanced threat detection and real-time monitoring.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$799/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group w-full max-w-sm rounded-xl overflow-hidden shadow-xl hover:shadow-2xl dark:shadow-stone-700/50 dark:hover:shadow-stone-600/70 transition-all duration-500 transform hover:scale-102 hover:rotate-3 hover:skew-y-1 relative bg-gradient-to-br from-stone-200 to-stone-100 dark:from-stone-800 dark:to-stone-900 border border-stone-300 dark:border-stone-700 perspective-1000">
        <div class="relative p-6 pt-10 pb-20 rounded-xl transform-style-preserve-3d backface-hidden group-hover:rotate-y-10 group-hover:rotate-x-5 transition-transform duration-500">
          <div class="absolute inset-0 bg-no-repeat bg-center opacity-5 dark:opacity-10" style="background-image: url('https://picsum.photos/id/62/300/200'); background-size: cover; filter: grayscale(100%) brightness(50%) sepia(100%);">
          </div>
          <div class="relative z-10">
            <img src="https://picsum.photos/id/1025/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md mb-6 shadow-md dark:shadow-none hover:shadow-lg transition-shadow duration-300 transform translateZ-20 perspective-1000">
            <h3 class="text-2xl font-bold text-amber-950 dark:text-amber-500 mb-3 transform translateZ-10">Enhanced Workflow Automation</h3>
            <p class="text-stone-800 dark:text-stone-300 text-base mb-6 transform translateZ-5">
              Streamline operations and boost team productivity with intelligent automation solutions.
            </p>
            <div class="flex justify-between items-center transform translateZ-15">
              <span class="text-lg font-semibold text-amber-800 dark:text-amber-400">$599/mo</span>
              <a href="#" class="inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-stone-100 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 transform translateZ-10 perspective-1000 group-hover:translateZ-20">
                Learn More
                <svg class="ml-2 -mr-1 w-5 h-5 group-hover:rotate-z-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              </a>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Testimonial / Featured Clients Section -->
    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-stone-900 dark:text-stone-100 mb-8">Trusted by Industry Leaders</h3>
      <div class="flex flex-wrap justify-center items-center gap-8 md:gap-12">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303657/microsoft-logo-2012-text.svg" alt="Client Logo 1">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303490/google-1.svg" alt="Client Logo 2">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303273/apple.svg" alt="Client Logo 3">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303102/amazon-2-logo.svg" alt="Client Logo 4">
        <img class="h-10 opacity-70 hover:opacity-100 dark:invert transition-opacity duration-300" src="https://www.svgrepo.com/show/303681/meta.svg" alt="Client Logo 5">
      </div>
    </div>

  </div>
</section>

<style>
  /* Custom perspective for 3D effects */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Tailwind does not have transform-style: preserve-3d, so adding it */
  .transform-style-preserve-3d {
    transform-style: preserve-3d;
  }

  /* Tailwind does not have backface-visibility: hidden, so adding it */
  .backface-hidden {
    backface-visibility: hidden;
  }

  /* Custom 3D transforms for interactivity */
  .group:hover .rotate-y-10 {
    transform: rotateY(10deg);
  }
  .group:hover .rotate-x-5 {
    transform: rotateX(5deg);
  }
  .group:hover .rotate-z-10 {
    transform: rotateZ(10deg);
  }

  .transform-rotateX-15 {
    transform: rotateX(15deg);
  }
  .transform-rotateY-5 {
    transform: rotateY(5deg);
  }
  .transform-translateZ-20 {
    transform: translateZ(20px);
  }
  .transform-translateZ-10 {
    transform: translateZ(10px);
  }
  .transform-translateZ-5 {
    transform: translateZ(5px);
  }
  .transform-r-translateZ-20 {
    transform: translateZ(-20px);
  }

  @media (min-width: 1024px) {
    .group:hover .group-hover\\:translateZ-20 {
      transform: translateZ(20px);
    }
  }
</style>

360_viewer_component

A responsive 360° viewer component designed forCRM/Business tools with a dark mode UI and a neon/electric color scheme.

Open Preview

                <div class="min-h-screen bg-gray-950 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans dark:bg-gray-950">
  <div class="w-full max-w-6xl bg-gray-900 rounded-xl shadow-2xl overflow-hidden border border-gray-800 dark:bg-gray-900 dark:border-gray-800">
    <div class="p-6 sm:p-8 lg:p-10">
      <div class="flex flex-col md:flex-row items-start justify-between mb-8">
        <div class="mb-6 md:mb-0">
          <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-2">
            <span class="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 text-transparent bg-clip-text">Product </span>
            <span class="bg-gradient-to-r from-blue-400 to-cyan-400 text-transparent bg-clip-text">Overview</span>
          </h2>
          <p class="text-gray-400 text-md sm:text-lg lg:text-xl">Explore every angle of our cutting-edge solution.</p>
        </div>
        <div class="flex flex-wrap gap-3">
          <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-purple-600 to-pink-500 shadow-lg shadow-purple-900/50 hover:from-purple-700 hover:to-pink-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-gray-900">
            <svg class="inline-block w-4 h-4 mr-2 -ml-1 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="M15 10l4.552-3.282A1 1 0 0121 7.618v8.764a1 1 0 01-1.448.894L15 14m-5 4v-4a4 4 0 014-4h2a4 4 0 014 4v4a4 4 0 01-4 4h-2a4 4 0 01-4-4z"></path></svg>
            View Demo
          </button>
          <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-cyan-500 shadow-lg shadow-blue-900/50 hover:from-blue-700 hover:to-cyan-600 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900">
            <svg class="inline-block w-4 h-4 mr-2 -ml-1 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
            Download Specs
          </button>
        </div>
      </div>

      <div class="relative aspect-video w-full rounded-lg overflow-hidden border-2 border-gray-700 shadow-xl shadow-gray-900/50 mb-8">
        <!-- Placeholder for 360 viewer. In a real application, this would be a JS-powered viewer. -->
        <img src="https://picsum.photos/1200/675?random=1" alt="360 Product View Placeholder" class="w-full h-full object-cover object-center animate-pulse-glow border-2 border-indigo-500/50 rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-60 backdrop-blur-sm text-white text-lg font-bold p-4 text-center rounded-lg border border-indigo-600/70">
          <p class="bg-gradient-to-r from-lime-400 to-green-400 text-transparent bg-clip-text text-xl sm:text-2xl lg:text-3xl font-extrabold">360° Interactive Viewer Coming Soon!</p>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-cyan-400 mr-3 animate-ping-slow"></span>
            Key Feature 1
          </h3>
          <p class="text-gray-400 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-purple-400 mr-3 animate-ping-slow"></span>
            Key Feature 2
          </h3>
          <p class="text-gray-400 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
          <h3 class="text-xl font-bold text-white mb-3 flex items-center">
            <span class="inline-block w-3 h-3 rounded-full bg-pink-400 mr-3 animate-ping-slow"></span>
            Key Feature 3
          </h3>
          <p class="text-gray-400 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>

      <div class="text-center">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-gray-900 bg-gradient-to-r from-lime-400 to-green-400 hover:from-lime-500 hover:to-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 focus:ring-offset-gray-900 transition duration-300 ease-in-out transform hover:scale-105">
          <svg class="-ml-1 mr-3 h-5 w-5 text-gray-900" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M7 4a1 1 0 011 1v4a1 1 0 01-2 0V5a1 1 0 011-1zm6 0a1 1 0 011 1v4a1 1 0 01-2 0V5a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          Get a Free Consultation
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes ping-slow {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
  }
  .animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.3); border-color: rgba(99, 102, 241, 0.5); }
    50% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.8), 0 0 25px rgba(99, 102, 241, 0.5); border-color: rgba(99, 102, 241, 0.8); }
  }
  .animate-pulse-glow {
    animation: pulse-glow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Paper/Print-inspired Monochromatic Government Component

A medium complexity component mimicking physical paper and print materials, designed for government/public service websites with a monochromatic color scheme and full responsiveness, including dark mode support.

Open Preview

                <div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-850 transition-colors duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
    <!-- Header Section (simulating a document header) -->
    <div class="bg-gray-200 p-4 border-b border-gray-300 dark:bg-gray-800 dark:border-gray-700 flex justify-between items-center">
      <h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-gray-700 dark:text-gray-300">Official Notice</h1>
      <span class="text-sm text-gray-600 dark:text-gray-400">Ref. ID: GVT-01-2023</span>
    </div>

    <!-- Document Body -->
    <div class="p-4 sm:p-6 md:p-8 space-y-6">
      <!-- Important Announcement/Title -->
      <div class="text-center">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 border-b-2 border-gray-400 pb-2 inline-block leading-tight">Public Service Announcement</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm italic">Issued: November 15, 2023</p>
      </div>

      <!-- Main Content Block 1 -->
      <section class="space-y-4">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 flex items-center">
          <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          Key Information
        </h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          This is an urgent public service announcement regarding changes to <strong class="font-bold">local community guidelines for waste management</strong>. Effective immediately, residents are advised to adhere to the revised sorting procedures to ensure efficient recycling and reduce landfill impact.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1 ml-4">
          <li>Separate plastics and glass from general waste.</li>
          <li>Compost organic materials where facilities are available.</li>
          <li>Dispose of hazardous waste at designated collection points only.</li>
        </ul>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed italic text-sm">Your cooperation is vital for the sustainability of our community.</p>
      </section>

      <!-- Interactive Section (e.g., links to resources/forms) -->
      <section class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
          <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2a1 1 0 100-2h-2z"/><path d="M10 7a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 14.414V17a1 1 0 102 0v-2.586l3.586 3.586a1 1 0 001.414-1.414l-7-7zM2 10a1 1 0 011-1h2a1 1 0 010 2H3a1 1 0 01-1-1zm15-1h-2a1 1 0 100 2h2a1 1 0 100-2zm-7 4a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 18.586V20a1 1 0 102 0v-1.414l3.586 3.586a1 1 0 001.414-1.414l-7-7z"/><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zM3 8a1 1 0 011-1h12a1 1 0 011 1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V8z" clip-rule="evenodd"></path></svg>
          Further Resources
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
            <p>Download Full Guidelines <span aria-hidden="true">&rarr;</span></p>
          </a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
            <p>Locate Your Nearest Recycling Center <span aria-hidden="true">&rarr;</span></p>
          </a>
        </div>
      </section>

      <!-- Contact Information / Signature Block -->
      <footer class="text-right text-sm text-gray-600 dark:text-gray-400 pt-4 border-t border-gray-200 dark:border-gray-700">
        <p>Sincerely,</p>
        <p class="font-semibold mt-1">Department of Public Wellness</p>
        <p>City Hall, 123 Main St, Anytown, State 12345</p>
        <p>Contact: <a href="mailto:[email protected]" class="text-gray-700 dark:text-gray-300 underline hover:text-gray-500 dark:hover:text-gray-500 transition-colors">[email protected]</a></p>
      </footer>
    </div>
  </div>
</div>

1 ... 54 55 56 57 58 ... 335