Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Affichage de la carte du produit rétro E-commerce

Un composant d’affichage de produits de commerce électronique complexe et réactif avec une esthétique rétro/vintage des années 80/90, avec une palette de couleurs violet/violet, des éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Cartes Skeuomorphes

Un composant de graphiques complexe et réactif avec un design skeuomorphe, une palette de couleurs neutres chaudes et une prise en charge du mode sombre, adapté aux tableaux de bord de forum ou de communauté.

Ouvrir Aperçu

                <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

Un composant de système d’évaluation complexe et réactif conçu dans un style Bauhaus avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’événements et de conférences. Comprend des éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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 Barre latérale

Un composant de barre latérale simple et réactif avec un design en dégradé monochromatique, adapté à l’agriculture et aux sites Web agricoles. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

CyberpunkCommeRéactionBoutons

Un composant simple et réactif des boutons J’aime/Réaction pour une place de marché, avec une esthétique cyberpunk avec des tons bleu océan et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant Boutons OAuth

Composant de boutons OAuth simple et réactif avec un style aquarelle / artistique, une palette de couleurs neutres et froides, adapté aux applications de commerce électronique. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant de forme neumorphe complexe, réactif et avec une palette de couleurs sourdes/désaturées, conçu pour les marques de mode et de beauté, avec plusieurs éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Composant de galerie de produits

Un composant de galerie de produits complexe et réactif avec une esthétique de conception 3D et une palette de couleurs sépia/marron, adapté aux applications technologiques/SaaS. Comprend plusieurs éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Un composant de visionneuse 360° réactif conçu pour les outils CRM/Business avec une interface utilisateur en mode sombre et une palette de couleurs néon/électrique.

Ouvrir Aperçu

                <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>

Composante gouvernementale monochrome inspirée du papier et de l’impression

Un composant de complexité moyenne imitant le papier physique et les documents imprimés, conçu pour les sites Web du gouvernement et des services publics avec une palette de couleurs monochromatique et une réactivité totale, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Rechercher des composants

Catégories

Tous les composants