Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant du lecteur audio Bauhaus

Un composant de lecteur audio complexe et réactif conçu selon les principes du Bauhaus pour les applications de sport/fitness, avec une base en noir et blanc avec une couleur d’accentuation frappante. Comprend les commandes de lecture, la barre de progression, le contrôle du volume, la liste des pistes et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-none overflow-hidden border-2 border-gray-900 dark:border-gray-100 transition-all duration-300 ease-in-out">
    <!-- Header / Top Section -->
    <div class="flex items-center justify-between p-4 sm:p-6 bg-yellow-400 dark:bg-yellow-600 border-b-2 border-gray-900 dark:border-gray-100 relative">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-gray-900 uppercase tracking-wider">
        Pro Workout Mix
      </h2>
      <button class="p-2 sm:p-3 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-105 active:scale-95 transition-transform">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute top-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -mr-1 -mt-1"></div>
    </div>

    <div class="grid md:grid-cols-3">
      <!-- Left Section: Album Art & Currently Playing -->
      <div class="md:col-span-1 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-b-2 md:border-b-0 md:border-r-2 border-gray-900 dark:border-gray-100 relative">
        <div class="aspect-w-1 aspect-h-1 mb-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 border-2 border-gray-900 dark:border-gray-100 relative group">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="object-cover w-full h-full p-2 block filter grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:p-0">
          <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute top-0 left-0 w-full h-full bg-yellow-400 dark:bg-yellow-600 opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="text-center">
          <p class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-1">Push It To The Limit</p>
          <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300">Turbo Beats Feat. Fitness Flow</p>
        </div>
        <div class="absolute bottom-0 right-0 w-6 h-6 sm:w-8 sm:h-8 bg-gray-900 dark:bg-gray-100 -mr-1 -mb-1"></div>
      </div>

      <!-- Middle Section: Controls & Progress -->
      <div class="md:col-span-2 p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 relative">

        <!-- Progress Bar -->
        <div class="w-full mb-6 relative">
          <div class="h-2 bg-gray-300 dark:bg-gray-700 border border-gray-900 dark:border-gray-100 relative">
            <div class="absolute h-full bg-yellow-400 dark:bg-yellow-600" style="width: 60%;"></div>
            <div class="absolute -mt-1 -ml-1 h-4 w-4 bg-gray-900 dark:bg-gray-100 border-2 border-yellow-400 dark:border-yellow-600" style="left: 60%; transform: translateX(-50%);"></div>
          </div>
          <div class="flex justify-between text-xs mt-2 text-gray-700 dark:text-gray-300">
            <span>2:35</span>
            <span>-1:45</span>
          </div>
        </div>

        <!-- Main Controls -->
        <div class="flex justify-center items-center space-x-4 sm:space-x-6 mb-8">

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.793 4.793a1 1 0 011.414 0L10 8.586l3.793-3.793a1 1 0 111.414 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832L12.744 10l-3.189-2.832z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.207 4.793a1 1 0 010 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 011.414-1.414L10 8.586l3.793-3.793a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Volume Control -->
        <div class="flex items-center justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-6">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494z" clip-rule="evenodd"></path></svg>
          <input type="range" class="w-32 bg-gray-300 dark:bg-gray-700 h-2 accent-yellow-400 dark:accent-yellow-600 border border-gray-900 dark:border-gray-100 outline-none hover:outline-none focus:outline-none" value="70">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494zM16.924 3.078a1 1 0 00-1.088 1.636 7.004 7.004 0 010 10.572 1 1 0 001.088 1.636 9.004 9.004 0 000-13.844z" clip-rule="evenodd"></path></svg>
        </div>

        <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mb-1"></div>
      </div>

      <!-- Right Section: Track List -->
      <div class="md:col-span-3 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-900 dark:border-gray-100 relative">
        <h3 class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-4">
          Playlist Tracks
        </h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-yellow-400 dark:hover:border-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">01</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Push It To The Limit</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Turbo Beats Feat. Fitness Flow</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:20</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">02</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Adrenaline Rush Zone</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Synth Pulse</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:55</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">03</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Endurance Max</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Power Drifters</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">5:10</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">04</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Beat Drop Blitz</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Rhythmic Force Inc.</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:40</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">05</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Victory Lap Anthem</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">The Finish Line Project</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:50</span>
          </li>
        </ul>
        <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mt-1"></div>
      </div>
    </div>
  </div>
</div>

Neon_Glow_Video_Player

Un composant de lecteur vidéo simple et réactif pour les sites Web d’entreprise, avec des effets de néon/lueur et une palette de couleurs chaudes de coucher de soleil. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800">
  <div class="w-full max-w-4xl bg-gradient-to-br from-amber-500 to-red-500 p-1 sm:p-2 rounded-xl shadow-xl dark:from-red-700 dark:to-orange-700 dark:shadow-2xl dark:shadow-red-900/50 transform hover:scale-[1.01] transition-all duration-300 ease-in-out glow-border">
    <div class="relative pb-[56.25%] overflow-hidden rounded-lg">
      <iframe
        class="absolute top-0 left-0 w-full h-full rounded-lg"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&modestbranding=1&rel=0"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-story"
        allowfullscreen
        title="Corporate Introduction Video"
      ></iframe>
    </div>
    <div class="mt-4 flex flex-col sm:flex-row justify-between items-center px-2 py-2">
      <h3 class="text-lg sm:text-xl font-bold text-white mb-2 sm:mb-0 drop-shadow-[0_0_5px_rgba(255,165,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(255,90,0,0.9)]">
        Innovating the Future of Business
      </h3>
      <button class="px-4 py-2 bg-white text-orange-600 rounded-lg text-sm font-semibold shadow-md
                     hover:bg-amber-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-amber-500
                     dark:bg-orange-800 dark:text-white dark:hover:bg-orange-700 dark:focus:ring-orange-500 dark:focus:ring-offset-red-700
                     glow-button">
        Learn More
      </button>
    </div>
  </div>
</div>

<style>
  /* Base glow effect for the container */
  .glow-border {
    box-shadow: 0 0 15px rgba(255, 120, 0, 0.6), /* Warm orange glow */
                0 0 30px rgba(255, 80, 0, 0.4), /* Deeper orange */
                inset 0 0 10px rgba(255, 180, 0, 0.3); /* Inner slight glow */
    animation: pulse-glow 2s infinite alternate;
  }

  .dark .glow-border {
    box-shadow: 0 0 15px rgba(255, 60, 0, 0.8),
                0 0 30px rgba(255, 0, 0, 0.6),
                inset 0 0 10px rgba(255, 90, 0, 0.4);
  }

  .glow-button {
    box-shadow: 0 0 8px rgba(255, 180, 0, 0.5);
    transition: all 0.3s ease-in-out;
  }

  .glow-button:hover {
    box-shadow: 0 0 15px rgba(255, 160, 0, 0.8), 0 0 20px rgba(255, 120, 0, 0.6);
  }

  .dark .glow-button {
    box-shadow: 0 0 8px rgba(255, 90, 0, 0.7);
  }
  
  .dark .glow-button:hover {
    box-shadow: 0 0 15px rgba(255, 70, 0, 0.9), 0 0 20px rgba(255, 0, 0, 0.7);
  }

  @keyframes pulse-glow {
    from { opacity: 0.9; transform: scale(1); }
    to { opacity: 1; transform: scale(1.005); }
  }
</style>

Composant de la liste de souhaits

Un composant de liste de souhaits réactif pour les applications de sport/fitness, avec des micro-interactions, une palette de couleurs à contraste élevé et la prise en charge du mode sombre. Les utilisateurs peuvent ajouter/supprimer des éléments et voir un retour visuel.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-12 text-center">
      Your Fitness Wishlist
    </h2>

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

      <!-- Wishlist Item 1 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=1" alt="Sports Item 1" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Pro Training Shoes</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">High-performance running shoes designed for speed and comfort.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$120.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
        <div class="absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full animate-bounce-custom" style="animation-iteration-count: infinite;">10% OFF</div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=2" alt="Sports Item 2" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Smart Fitness Tracker</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Monitor your heart rate, steps, and sleep with advanced precision.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$85.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=3" alt="Sports Item 3" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Ergonomic Yoga Mat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Non-slip surface and extra cushioning for optimal yoga and pilates sessions.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$45.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
        <div class="absolute top-3 left-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</div>
      </div>

      <!-- Wishlist Item 4 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=4" alt="Sports Item 4" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Durable Dumbbell Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Adjustable weights for versatile strength training workouts at home.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$150.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 5 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=5" alt="Sports Item 5" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Hydration Backpack</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Lightweight and spacious backpack for long runs or hikes.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$60.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

      <!-- Wishlist Item 6 -->
      <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden group">
        <img src="https://picsum.photos/400/300?random=6" alt="Sports Item 6" class="w-full h-48 sm:h-56 object-cover rounded-t-xl group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="p-4 sm:p-5 flex flex-col justify-between h-full">
          <div>
            <h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-2">Resistance Band Set</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm md:text-base mb-4 line-clamp-2">Versatile bands for strength, flexibility, and rehabilitation exercises.</p>
          </div>
          <div class="flex items-center justify-between mt-auto">
            <span class="text-2xl md:text-3xl font-extrabold text-blue-600 dark:text-cyan-400">$30.00</span>
            <button class="relative group/btn bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-cyan-600 dark:to-blue-700 text-white rounded-full px-5 py-2.5 text-base font-semibold overflow-hidden shadow-md hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95">
              <span class="relative z-10">Remove</span>
              <span class="absolute inset-0 bg-white opacity-0 group-hover/btn:opacity-20 transition-opacity duration-300"></span>
              <div class="absolute inset-0 rounded-full bg-white dark:bg-gray-700 transform scale-0 group-active/btn:scale-105 opacity-0 transition-all duration-300 ease-out"></div>
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button class="inline-flex items-center px-8 py-4 bg-lime-600 hover:bg-lime-700 dark:bg-lime-500 dark:hover:bg-lime-600 text-white text-lg sm:text-xl font-bold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 group">
        <svg class="w-6 h-6 mr-3 group-hover:rotate-6 transition-transform duration-300" 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Proceed to Checkout
      </button>
    </div>

  </div>
</div>

<style>
  /* Custom keyframes for bounce-custom animation */
  @keyframes bounce-custom {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .animate-bounce-custom {
    animation-name: bounce-custom;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
  }
</style>

Ajouter au panier Composant du bouton - Memphis Grayscale Météo

Un composant complexe de bouton « Ajouter au panier » avec l’inspiration du design de Memphis utilisant une palette de couleurs en niveaux de gris, adapté à un produit météo/climat. Les fonctionnalités comprennent une icône dynamique, un état de chargement, une animation d’impulsion et un nombre d’éléments, le tout réactif et prenant en charge le mode sombre. Ce composant est conçu comme un appel à l’action ludique et fonctionnel pour les abonnements aux données météorologiques ou les produits liés au climat.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <div class="relative w-full max-w-sm rounded-[24px] overflow-hidden shadow-xl 
              bg-white dark:bg-neutral-800 
              border-4 border-black dark:border-white
              transform skew-y-3 rotate-1 scale-95 transition-all duration-300 ease-in-out
              hover:skew-y-0 hover:rotate-0 hover:scale-100">
    
    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <div class="absolute -top-10 -left-10 w-32 h-32 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
      <div class="absolute -bottom-5 -right-5 w-24 h-24 bg-neutral-700 dark:bg-neutral-300 transform rotate-45"></div>
      <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-neutral-500 dark:bg-neutral-500 transform skew-x-12"></div>
      <div class="absolute bottom-1/3 left-1/3 w-20 h-20 bg-neutral-400 dark:bg-neutral-600 rounded-lg"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-8 flex flex-col items-center justify-center space-y-6">

      <!-- Product Title/Description (Example: Weather Data Package) -->
      <h2 class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-neutral-50 text-center uppercase tracking-wide 
                 transform -skew-x-6 bg-neutral-200 dark:bg-neutral-700 p-2 rounded-lg">
        Premium Climate Insights
      </h2>
      <p class="text-md sm:text-lg text-neutral-700 dark:text-neutral-200 text-center max-w-xs leading-relaxed">
        Unlock 7-day extended forecasts & historical data.
      </p>

      <div class="flex items-center space-x-4 mb-4">
        <!-- Price Display -->
        <span class="text-4xl sm:text-5xl font-extrabold text-neutral-900 dark:text-neutral-50 
                     flex items-center skew-y-2 
                     bg-neutral-300 dark:bg-yellow-500 
                     border-4 border-black dark:border-white
                     px-4 py-2 rounded-xl shadow-lg relative z-10">
          <span class="block transform -rotate-6 relative top-1 text-2xl">$</span>29.99
        </span>
        <!-- Icon for Weather/Climate -->
        <img src="https://raw.githubusercontent.com/twbs/icons/main/icons/cloud-sun-fill.svg" alt="Weather Icon" class="w-16 h-16 sm:w-20 sm:h-20 
             text-neutral-600 dark:text-neutral-300
             filter drop-shadow-lg
             transform rotate-12 transition-transform duration-300 hover:rotate-0 dark:invert">
      </div>

      <!-- Dynamic Add to Cart Button -->
      <button type="button" class="group relative overflow-hidden h-16 w-full rounded-full 
                                  bg-black dark:bg-white
                                  text-white dark:text-black
                                  text-xl sm:text-2xl font-bold uppercase tracking-wider 
                                  flex items-center justify-center 
                                  shadow-xl 
                                  border-4 border-neutral-700 dark:border-neutral-300
                                  transform skew-x-3 transition-transform duration-300 
                                  hover:skew-x-0 hover:scale-105 
                                  focus:outline-none focus:ring-4 focus:ring-neutral-400 dark:focus:ring-neutral-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-800">
        
        <span class="absolute inset-0 bg-neutral-800 dark:bg-neutral-200 transform scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 ease-out z-0"></span>
        
        <!-- Button content -->
        <span class="relative z-10 flex items-center space-x-3 transition-transform duration-300 group-hover:-translate-y-full group-[.added]:translate-x-0 group-[.loading]:translate-x-0">
          <span>Add to Cart</span>
          <svg class="w-7 h-7 fill-current transition-all duration-300 group-hover:rotate-[360deg]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 11H9.83L12.59 8.24L11.17 6.83L7 11L11.17 15.17L12.59 13.76L9.83 11H17V11Z" />
            <path d="M17 12H7V10H17V12Z" class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
          </svg>
        </span>

        <!-- Added state -->
        <span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.added]:translate-y-0">
          <span>Added!</span>
          <svg class="w-7 h-7 fill-current animate-bounce" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6L9 16.2Z"/>
          </svg>
        </span>

        <!-- Loading state -->
        <span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.loading]:translate-y-0">
          <svg class="animate-spin h-7 w-7 text-white dark:text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          Loading...
        </span>

      </button>

      <!-- Quantity Selector / Item Count -->
      <div class="flex items-center space-x-4 mt-4 text-neutral-800 dark:text-neutral-100">
        <span class="text-lg sm:text-xl font-semibold 
                     transform -rotate-3 leading-none opacity-80
                     bg-neutral-200 dark:bg-neutral-700 px-3 py-1 rounded-full">
          Items:
        </span>
        <div class="flex items-center space-x-2 
                    bg-neutral-300 dark:bg-neutral-600 
                    border-2 border-black dark:border-white
                    rounded-xl shadow-inner p-1">
          <button class="w-10 h-10 flex items-center justify-center rounded-full 
                         bg-black dark:bg-white text-white dark:text-black 
                         text-2xl font-bold 
                         transition-all duration-200
                         hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white 
                         transform rotate-6 hover:rotate-0">-</button>
          <span class="w-12 h-12 flex items-center justify-center 
                       text-3xl font-extrabold 
                       border-l-2 border-r-2 border-neutral-600 dark:border-neutral-300 
                       text-neutral-900 dark:text-neutral-50">
            1
          </span>
          <button class="w-10 h-10 flex items-center justify-center rounded-full 
                         bg-black dark:bg-white text-white dark:text-black 
                         text-2xl font-bold 
                         transition-all duration-200
                         hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white 
                         transform -rotate-6 hover:-rotate-0">+</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- To demonstrate states, one would typically add JS to toggle 'added' and 'loading' classes on the button -->
<!-- Example: -->
<!-- <script>
  const button = document.querySelector('.group.relative');
  button.addEventListener('click', () => {
    button.classList.add('loading');
    setTimeout(() => {
      button.classList.remove('loading');
      button.classList.add('added');
      setTimeout(() => {
        button.classList.remove('added');
        // Optionally reset button or show another state
      }, 2000); // Display 'Added!' for 2 seconds
    }, 1500); // Simulate loading for 1.5 seconds
  });
</script> -->

Weather_Climate_Retro_Dark_Dashboard

Un composant de tableau de bord simple et rétro en mode sombre pour les données météorologiques et climatiques, réactif sur tous les appareils.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-900 text-gray-400 font-sans p-4 sm:p-6 md:p-8 dark:bg-gray-900">

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

    <!-- Header/Title -->
    <div class="flex flex-col sm:flex-row items-center justify-between pb-4 border-b border-gray-700">
      <h1 class="text-3xl sm:text-4xl font-extrabold text-amber-300 tracking-wider mb-2 sm:mb-0">Climate Outlook</h1>
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 text-gray-500" 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="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-7.79l.707-.707M6.707 17.325l-.707.707M16.949 7.05l.707-.707M7.05 16.949l-.707.707M12 10a2 2 0 100 4 2 2 0 000-4z"></path></svg>
        <span class="text-sm text-gray-500">Last Updated: 12:30 PM, Oct 26</span>
      </div>
    </div>

    <!-- Main Weather Card -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
        <div class="flex items-center mb-4 md:mb-0">
          <img src="https://picsum.photos/id/1041/100/100" alt="Cloudy Sky" class="w-24 h-24 rounded-full mr-4 object-cover border-2 border-amber-400" />
          <div>
            <p class="text-6xl font-bold text-amber-200">22°C</p>
            <p class="text-xl text-gray-300">Partly Cloudy</p>
          </div>
        </div>
        <div class="text-right">
          <p class="text-3xl font-semibold text-gray-200 mb-1">New York</p>
          <p class="text-lg text-gray-400">Humidity: 65%</p>
          <p class="text-lg text-gray-400">Wind: 15 km/h E</p>
        </div>
      </div>
    </div>

    <!-- Forecast Cards (Grid) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">

      <!-- Day 1 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p- Dudley. The text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tomorrow</p>
        <img src="https://picsum.photos/id/972/80/80" alt="Rainy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">18°C</p>
        <p class="text-md text-gray-400">Rainy</p>
      </div>

      <!-- Day 2 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Sun</p>
        <img src="https://picsum.photos/id/1020/80/80" alt="Sunny Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">25°C</p>
        <p class="text-md text-gray-400">Sunny</p>
      </div>

      <!-- Day 3 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Mon</p>
        <img src="https://picsum.photos/id/1024/80/80" alt="Cloudy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">20°C</p>
        <p class="text-md text-gray-400">Cloudy</p>
      </div>

      <!-- Day 4 -->
      <div class="bg-opacity-20 bg-gray-800 rounded-lg p-4 text-center shadow-lg border border-gray-700">
        <p class="text-lg font-semibold text-gray-200 mb-2">Tue</p>
        <img src="https://picsum.photos/id/1077/80/80" alt="Windy Icon" class="w-20 h-20 mx-auto mb-2 opacity-80" />
        <p class="text-2xl font-bold text-amber-300">19°C</p>
        <p class="text-md text-gray-400">Windy</p>
      </div>

    </div>

    <!-- Climate Trend Chart Placeholder -->
    <div class="bg-opacity-20 bg-gray-800 rounded-lg p-6 shadow-lg border border-gray-700">
      <h2 class="text-xl font-semibold text-gray-200 mb-4">Temperature Trend (Last 7 Days)</h2>
      <div class="w-full h-48 bg-gray-700 rounded-md flex items-center justify-center">
        <p class="text-gray-500 text-lg">Graph Placeholder</p>
      </div>
    </div>

    <!-- Additional Data Points / Footer -->
    <div class="flex flex-col sm:flex-row items-center justify-between text-gray-500 pt-4 border-t border-gray-700">
      <p class="text-sm mb-2 sm:mb-0">© 2023 Retro Climate Inc.</p>
      <div class="flex space-x-4 text-sm">
        <a href="#" class="hover:text-gray-400">Privacy</a>
        <a href="#" class="hover:text-gray-400">Terms</a>
        <a href="#" class="hover:text-gray-400">Contact</a>
      </div>
    </div>

  </div>
</div>

Composant Boutons de partage social

Un composant de bouton de partage social ludique et amusant conçu pour les sites Web de jeux, avec une palette de couleurs arc-en-ciel dégradée, des éléments arrondis et des effets de survol interactifs. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 max-w-full mx-auto transform transition-all duration-300 hover:scale-[1.01] border-4 border-white dark:border-gray-700 overflow-hidden relative group">
    
    <!-- Background Sparkle Effect -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-50 transition-opacity duration-500">
      <div class="absolute w-12 h-12 bg-purple-400 rounded-full blur-xl top-4 left-4 animate-pulse-slow"></div>
      <div class="absolute w-16 h-16 bg-pink-400 rounded-full blur-xl bottom-8 right-8 animate-pulse-slow animation-delay-2000"></div>
      <div class="absolute w-10 h-10 bg-yellow-400 rounded-full blur-xl top-1/2 left-1/4 animate-pulse-slow animation-delay-4000"></div>
    </div>
    
    <div class="relative z-10 text-center">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-4 sm:mb-6 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-500 dark:from-purple-400 dark:via-pink-400 dark:to-yellow-400 drop-shadow-md">
        Share the Epic Win!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto">
        Spread the word about your legendary gaming moments and invite friends to join the fun.
      </p>

      <div class="flex flex-wrap justify-center gap-4 sm:gap-6">

        <!-- Twitter Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700
          dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600
          relative overflow-hidden z-10"
          aria-label="Share on Twitter">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.25c8.53 0 13.2-7.07 13.2-13.2v-.6c.91-.66 1.7-.68 2.33-1.07-.85.38-1.74.65-2.67.76.98-.59 1.74-1.5 2.1-2.61-.92.55-1.94.95-3.02 1.17C18.66 2.74 17.5 2 16.22 2c-2.4 0-4.35 1.95-4.35 4.35 0 .34.04.67.11.99C7.45 6.64 3.9 4.7 1.5 1.5c-.37.63-.58 1.34-.58 2.13 0 1.5 1.1 2.76 2.5 3.32-.96-.03-1.87-.29-2.66-.7v.05c0 2.11 1.5 3.87 3.5 4.28-.36.1-.73.15-1.12.15-.27 0-.54-.03-.8-.08.56 1.75 2.17 3.03 4.09 3.06-1.57 1.23-3.56 1.95-5.72 1.95-.37 0-.74-.02-1.1-.06C2.9 19.3 5.06 20.25 8.29 20.25z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Facebook Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-indigo-500 to-indigo-700 hover:from-indigo-600 hover:to-indigo-800
          dark:from-indigo-700 dark:to-indigo-900 dark:hover:from-indigo-600 dark:hover:to-indigo-800
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-600
          relative overflow-hidden z-10"
          aria-label="Share on Facebook">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Discord Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800
          dark:from-purple-700 dark:to-purple-900 dark:hover:from-purple-600 dark:hover:to-purple-800
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600
          relative overflow-hidden z-10"
          aria-label="Share on Discord">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.25 6.475C19.782 5.093 18.91 3.882 17.75 2.946c-.053-.042-.11-.08-.168-.11ZM3.743 6.475C4.21 5.093 5.083 3.882 6.242 2.946c.057-.042.115-.08.172-.11ZM12 0c-1.895 0-3.77.363-5.594 1.107C4.697 2.193 3.036 3.633 1.83 5.28c-1.205 1.647-1.92 3.513-2.072 5.42C-.32 12.63.15 14.542.929 16.326c.78 1.784 1.936 3.376 3.393 4.673 1.458 1.3 3.167 2.25 5.05 2.894 1.884.644 3.844.821 5.792.518 1.947-.303 3.805-.98 5.437-2 1.632-1.02 2.993-2.404 3.99-4.01C23.85 14.28 24.32 12.37 24 10.42c-.152-1.907-.866-3.773-2.072-5.42C20.728 3.633 19.068 2.193 17.402 1.107 15.576.363 13.7.001 11.805 0zm-2.003 14.735c-.947 0-1.74-.752-1.74-1.68 0-.928.793-1.68 1.74-1.68.95 0 1.74.752 1.74 1.68 0 .927-.79 1.68-1.74 1.68zm7.006 0c-.947 0-1.74-.752-1.74-1.68 0-.928.794-1.68 1.74-1.68.948 0 1.737.752 1.737 1.68 0 .927-.789 1.68-1.737 1.68zm-.136-5.093c-.93-.414-2.8-.756-4.87-.756-2.07 0-3.94 1.89-4.87.756-.36-.16-.388-.307-.15-.46 2.45-1.57 4.09-.94 4.09-.94l.112.062s2.61.69 4.31-.065c.238-.153.21-.005-.15.46z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Reddit Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700
          dark:from-orange-600 dark:to-orange-800 dark:hover:from-orange-500 dark:hover:to-orange-700
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600
          relative overflow-hidden z-10"
          aria-label="Share on Reddit">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C6.47 0 2 4.58 2 10.22c0 2.21.73 4.25 1.96 5.86.08.11.12.26.12.42v5.02c0 .48.37.87.84.87h1.02c.08 0 .15-.02.21-.05.5-.23 1.05-.59 1.64-.92.29-.16.6-.28.93-.34 1.1-.2 2.29-.3 3.52-.3 1.23 0 2.42.1 3.52.3.32.06.64.18.93.34.59.33 1.14.69 1.64.92.07.03.14.05.21.05h1.02c.47 0 .84-.39.84-.87v-5.02c0-.16.04-.31.12-.42C21.27 14.47 22 12.43 22 10.22 22 4.58 17.53 0 12 0zm5.22 15.65c-.24.13-1.07.39-2.02.39-1.01 0-1.9-.3-2.8-.81-.22-.1-.4-.08-.57.06-.11.08-.2.18-.28.3-.08.1-.15.2-.2.3-.02.04-.04.09-.06.14-.07.13-.09.28-.06.41.03.1.09.18.17.25.13.11.3.17.47.17h.1c.14 0 .27-.05.37-.14l.02-.02c.11-.1.2-.21.28-.34.19-.3.12-.66-.19-.77-.38-.13-.77-.18-1.25-.18-.34 0-.68.04-1.0.12-.13.03-.27.06-.4.06-.03 0-.06-.01-.09-.02-.15-.04-.2-.2-.14-.3.04-.08.1-.16.18-.22.09-.07.19-.13.3-.18.1-.05.21-.08.32-.1.14-.02.2-.1.15-.22-.02-.04-.04-.08-.07-.12-.05-.09-.12-.16-.19-.22-.09-.08-.2-.13-.3-.16-.08-.02-.16-.03-.24-.03-.11 0-.2.03-.27.08s-.13.11-.15.19c-.06.16-.06.33 0 .49.03.09.08.17.15.23.08.07.17.12.27.16.12.04.25.07.38.07.13 0 .25-.03.37-.08.12-.06.22-.14.3-.23.1-.11.16-.2.16-.3l.01-.02c0-.03 0-.05-.02-.08-.02-.02-.04-.04-.07-.05-.05-.02-.12-.02-.19 0-.08.02-.16.06-.23.11-.08.05-.15.11-.22.17-.06.07-.12.15-.17.24-.03.05-.05.1-.06.15-.02.05-.03.1-.03.16 0 .09.03.17.08.23.05.06.11.1.18.12.07.02.14.03.22.03.1 0 .2-.02.29-.05.09-.03.17-.07.24-.12.08-.05.14-.1.19-.17.06-.06.1-.13.13-.2.03-.07.04-.14.04-.21 0-.1-.03-.19-.07-.27-.05-.08-.11-.15-.19-.21-.09-.07-.19-.12-.3-.16-.11-.04-.23-.06-.35-.06-.2 0-.39.04-.57.1-.18.06-.34.14-.49.25-.15.1-.28.22-.39.36-.11.14-.19.29-.25.46-.06.16-.08.34-.05.51.03.17.11.33.22.46.11.14.25.26.4.35.15.09.31.16.48.2.17.04.35.06.5.06.21 0 .41-.03.6-.08.19-.05.37-.12.54-.2.17-.09.32-.19.46-.3.14-.1.26-.23.36-.36.03-.04.05-.08.07-.12.03-.05.04-.1.04-.16 0-.08-.02-.15-.06-.22-.04-.07-.09-.13-.15-.17-.06-.05-.13-.08-.2-.1-.07-.02-.15-.02-.23 0-.08.02-.15.05-.21.09-.06.04-.11.08-.16.13-.04.05-.07.09-.08.14-.02.04-.03.09-.03.14 0 .07.02.13.06.18.04.05.09.08.15.1.06.02.12.02.19 0zm1.78-4.22c-.67 0-1.25-.58-1.25-1.29 0-.7.58-1.29 1.25-1.29.69 0 1.25.59 1.25 1.29 0 .71-.56 1.29-1.25 1.29zM8.32 10.14c-.67 0-1.25-.58-1.25-1.29 0-.7.58-1.29 1.25-1.29.69 0 1.25.59 1.25 1.29 0 .71-.56 1.29-1.25 1.29z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

      </div>

      <p class="text-sm text-gray-500 dark:text-gray-400 mt-8">
        Game on! &copy; 2023
      </p>

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

<style>
  /* Custom animations for the playful background sparks */
  @keyframes pulse-slow {
    0% { transform: scale(0.8) translateY(0px) rotate(0deg); opacity: 0.2; }
    25% { transform: scale(1.1) translateY(-5px) rotate(10deg); opacity: 0.4; }
    50% { transform: scale(1) translateY(0px) rotate(0deg); opacity: 0.2; }
    75% { transform: scale(0.9) translateY(5px) rotate(-10deg); opacity: 0.3; }
    100% { transform: scale(0.8) translateY(0px) rotate(0deg); opacity: 0.2; }
  }

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

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>

Retro_Jewel_Tone_Dashboard_Footer_Navigation

Un composant de navigation en pied de page réactif pour un tableau de bord, inspiré de l’esthétique rétro/vintage avec des couleurs de bijoux (émeraude, saphir, rubis) et la prise en charge du mode sombre. Il comprend des liens de navigation, des icônes de médias sociaux et des informations sur les droits d’auteur.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-emerald-700 to-sapphire-800 text-white py-12 px-6 sm:px-8 lg:px-12 dark:from-emerald-950 dark:to-slate-900 border-t-4 border-emerald-500 dark:border-ruby-600 font-mono">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10">
    
    <div class="col-span-1">
      <h3 class="text-2xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide uppercase">Retr<span class="text-emerald-300 dark:text-ruby-400">o</span>Dash</h3>
      <p class="text-emerald-100 text-sm leading-relaxed mb-4">
        Navigating the digital frontier with a nostalgic glance. Your trusted partner for insights from the past, presented for the future.
      </p>
      <div class="flex space-x-4">
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.361 21.109 22 16.51 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.55 13.92-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42 9 0 13.93-7.55 13.93-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42z" />
          </svg>
        </a>
        <a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.863 8.163 6.84 9.504.498.09.678-.216.678-.47v-1.68c-2.775.605-3.363-1.34-3.363-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.006.07 1.532 1.026 1.532 1.026.892 1.53 2.34 1.085 2.91.83.09-.645.35-1.085.637-1.34-2.22-.253-4.555-1.11-4.555-4.912 0-1.087.388-1.974 1.029-2.672-.102-.253-.448-1.267.098-2.637 0 0 .84-.268 2.75 1.024A9.56 9.56 0 0112 6.844c.594 0 1.18.08 1.74.242 1.91-1.292 2.75-1.024 2.75-1.024.546 1.37.202 2.384.1 2.637.64.698 1.028 1.585 1.028 2.672 0 3.81-2.337 4.656-4.564 4.904.358.308.675.918.675 1.85V21c0 .254.18.56.678.47A9.995 9.995 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <nav class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Quick Links</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Dashboard Home</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Data Overview</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Analytics Reports</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">User Settings</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Support & Help</a></li>
      </ul>
    </nav>

    <div class="col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Resources</h3>
      <ul class="space-y-4">
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Documentation</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">API Reference</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Blog & Articles</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Privacy Policy</a></li>
        <li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Terms of Service</a></li>
      </ul>
    </div>

    <div class="col-span-1">
      <h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Contact Us</h3>
      <address class="not-italic text-emerald-100 text-sm space-y-2">
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>123 Pixel Blvd, Data City, 90210</p>
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4H5a2 2 0 01-2-2v-8z"></path></svg>[email protected]</p>
        <p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.592-1.555a2 2 0 012.288-.04l2.583 1.55A1 1 0 0121 11.69a2 2 0 01-2 2h-.096l-3.328 1.997a2 2 0 01-.734 3.323l-3.328 1.997a2 2 0 00-2.264 0l-3.328-1.997a2 2 0 01-.734-3.323L3.096 13.69A2 2 0 013 11.69V5z"></path></svg>+1 (555) RETRO-88</p>
      </address>
    </div>

  </div>
  
  <div class="border-t border-emerald-500/50 dark:border-ruby-700/50 pt-8 mt-10 text-center text-emerald-200 dark:text-slate-400 text-sm">
    <p>&copy; 2023 RetroDash. All rights reserved. <span class="hidden sm:inline">Embrace the past, power your future.</span></p>
  </div>
</footer>

Composant Filtres

Un composant de filtres complexe et réactif pour un tableau de bord, doté d’un design épuré et minimaliste avec une palette de couleurs néon/électrique, prenant en charge plusieurs éléments interactifs et le mode sombre. Conçu pour la visualisation de données et les panneaux de contrôle.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-lime-400 dark:text-lime-500 tracking-tight">Dashboard Filters</h2>

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

      <!-- Search Input -->
      <div class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2 relative">
        <label for="search" class="block text-sm font-medium text-blue-600 dark:text-blue-400 mb-2">Search Anything</label>
        <input type="text" id="search" placeholder="Type here to search..." class="w-full px-4 py-3 border border-blue-500 dark:border-blue-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300">
        <div class="absolute inset-y-0 right-0 pr-3 flex items-center pt-8 pointer-events-none">
          <svg class="h-5 w-5 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <!-- Date Range Picker -->
      <div class="col-span-full lg:col-span-2 xl:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label for="startDate" class="block text-sm font-medium text-pink-600 dark:text-pink-400 mb-2">Start Date</label>
          <input type="date" id="startDate" class="w-full px-4 py-3 border border-pink-500 dark:border-pink-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
        </div>
        <div>
          <label for="endDate" class="block text-sm font-medium text-pink-600 dark:text-pink-400 mb-2">End Date</label>
          <input type="date" id="endDate" class="w-full px-4 py-3 border border-pink-500 dark:border-pink-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
        </div>
      </div>

      <!-- Dropdown Filter 1 -->
      <div>
        <label for="categoryFilter" class="block text-sm font-medium text-lime-600 dark:text-lime-400 mb-2">Category</label>
        <div class="relative">
          <select id="categoryFilter" class="block appearance-none w-full px-4 py-3 pr-8 border border-lime-500 dark:border-lime-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-lime-400 dark:focus:ring-lime-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
            <option value="">All Categories</option>
            <option value="finance">Finance</option>
            <option value="marketing">Marketing</option>
            <option value="operations">Operations</option>
            <option value="hr">HR</option>
            <option value="sales">Sales</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-lime-700 dark:text-lime-500">
            <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 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
      </div>

      <!-- Dropdown Filter 2 -->
      <div>
        <label for="statusFilter" class="block text-sm font-medium text-purple-600 dark:text-purple-400 mb-2">Status</label>
        <div class="relative">
          <select id="statusFilter" class="block appearance-none w-full px-4 py-3 pr-8 border border-purple-500 dark:border-purple-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-purple-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 transition-colors duration-300">
            <option value="">All Statuses</option>
            <option value="active">Active</option>
            <option value="pending">Pending</option>
            <option value="completed">Completed</option>
            <option value="cancelled">Cancelled</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-purple-700 dark:text-purple-500">
            <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 5.757 6.586 4.343 8z"/></svg>
          </div>
        </div>
      </div>

      <!-- Slider Filter (Range) -->
      <div class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2">
        <label for="rangeFilter" class="block text-sm font-medium text-cyan-600 dark:text-cyan-400 mb-2">Value Range <span id="rangeValue" class="font-bold">$100 - $500</span></label>
        <input type="range" id="rangeFilter" min="0" max="1000" value="300" step="100" class="w-full h-2 bg-gradient-to-r from-teal-400 to-cyan-500 dark:from-teal-600 dark:to-cyan-700 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-cyan-400 dark:focus:ring-cyan-500 transition-colors duration-300">
      </div>

      <!-- Checkbox Group -->
      <fieldset class="col-span-full md:col-span-2 lg:col-span-1 xl:col-span-2 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-orange-500 dark:border-orange-600 transition-colors duration-300">
        <legend class="text-sm font-medium text-orange-600 dark:text-orange-400 mb-3">Options</legend>
        <div class="grid grid-cols-2 gap-y-2 sm:gap-x-4">
          <div class="flex items-center">
            <input id="option1" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option1" class="ml-2 text-gray-800 dark:text-gray-200">Critical Only</label>
          </div>
          <div class="flex items-center">
            <input id="option2" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option2" class="ml-2 text-gray-800 dark:text-gray-200">Hide Completed</label>
          </div>
          <div class="flex items-center">
            <input id="option3" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option3" class="ml-2 text-gray-800 dark:text-gray-200">Show Drafts</label>
          </div>
          <div class="flex items-center">
            <input id="option4" type="checkbox" class="h-5 w-5 text-orange-500 dark:text-orange-400 rounded focus:ring-orange-400 dark:focus:ring-orange-500 border-gray-300 dark:border-gray-600 bg-gray-200 dark:bg-gray-700">
            <label for="option4" class="ml-2 text-gray-800 dark:text-gray-200">Archive Inclusive</label>
          </div>
        </div>
      </fieldset>

      <!-- Apply and Reset Buttons -->
      <div class="col-span-full flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 mt-4">
        <button class="flex-1 py-3 px-6 rounded-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 hover:from-blue-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 shadow-md transition-all duration-300 transform hover:scale-105">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Apply Filters
          </span>
        </button>
        <button class="flex-1 py-3 px-6 rounded-lg font-semibold text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 shadow-md transition-all duration-300 transform hover:scale-105 border border-gray-400 dark:border-gray-600">
          <span class="flex items-center justify-center">
            <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.08V12m-8.982 8l9-9 9 9M7 12l-2-2m0 0L3 6m2 2l4-4" />
            </svg>
            Reset
          </span>
        </button>
      </div>

    </div>
  </div>

  <script>
    // JavaScript for range slider value display (optional, but good for UX)
    document.addEventListener('DOMContentLoaded', function() {
      const rangeFilter = document.getElementById('rangeFilter');
      const rangeValue = document.getElementById('rangeValue');

      if (rangeFilter && rangeValue) {
        rangeFilter.addEventListener('input', function() {
          const value = parseInt(this.value);
          rangeValue.textContent = `$${value} - $${value + 400}`;
        });

        // Set initial value
        const initialValue = parseInt(rangeFilter.value);
        rangeValue.textContent = `$${initialValue} - $${initialValue + 400}`;
      }
    });
  </script>
</div>

Cyberpunk Image Agricole Lightbox

Un composant de lightbox d’image complexe et réactif à l’esthétique cyberpunk, avec une palette de couleurs violet/violet, conçu pour les sites Web agricoles et agricoles. Il prend en charge le mode sombre et affiche des images avec des titres, des descriptions et des métadonnées de base.

Ouvrir Aperçu

                <div class="min-h-screen bg-neutral-950 dark:bg-black text-violet-200 p-4 font-mono antialiased">

  <!-- Grid of thumbnail images -->
  <h2 class="text-2xl md:text-3xl font-bold mb-6 text-center tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-600 drop-shadow-md">Neural Crop Database // Image Log</h2>
  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-10">
    <!-- Image Thumbnail 1 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/100/1280/720', 'Hydroponic Greens Farm', 'Automated vertical farm cultivating a variety of leafy greens in a controlled environment.', 'Harvest Date: 2077-10-23', 'Sensor Readings: Optimal', 'Operator: Unit 734-Alpha')">
      <img src="https://picsum.photos/id/100/300/200" alt="Hydroponic Greens" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Hydroponic Greens</p>
      </div>
    </div>
    <!-- Image Thumbnail 2 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/101/1280/720', 'Automated Drone Irrigation', 'Precision irrigation drones deployed over a vast bio-engineered wheat field.', 'Last Flight: 2077-10-22', 'Fuel Cell: 98%', 'Unit ID: Drone-004')">
      <img src="https://picsum.photos/id/101/300/200" alt="Automated Drone Irrigation" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Drone Irrigation</p>
      </div>
    </div>
    <!-- Image Thumbnail 3 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/102/1280/720', 'Subterranean Myco-Farm', 'Advanced fungal cultivation in a controlled subterranean environment.', 'Harvest Cycle: Weekly', 'Humidity: 95%', 'Strain: Myco-Synth 001')">
      <img src="https://picsum.photos/id/102/300/200" alt="Subterranean Myco-Farm" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Myco-Farm</p>
      </div>
    </div>
     <!-- Image Thumbnail 4 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/103/1280/720', 'Bioluminescent Algae Tanks', 'Energy-efficient algae bioreactors producing biofuel and agricultural supplements.', 'Biomass Output: High', 'Temp: 28°C', 'Project: Bio-Fuel Nexus')">
      <img src="https://picsum.photos/id/103/300/200" alt="Bioluminescent Algae Tanks" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Algae Tanks</p>
      </div>
    </div>
    <!-- Image Thumbnail 5 -->
    <div class="group relative overflow-hidden rounded-lg border border-purple-800/50 hover:border-fuchsia-500 transition-all duration-300 transform hover:scale-105 cursor-pointer" onclick="openLightbox('https://picsum.photos/id/104/1280/720', 'Urban Vertical Garden', 'Compact automated vertical farm integrated into an urban skyscraper.', 'Crops: Mixed Greens', 'Water Usage: Minimal', 'Location: Sector 7, Rooftop A')">
      <img src="https://picsum.photos/id/104/300/200" alt="Urban Vertical Garden" class="w-full h-auto object-cover group-hover:opacity-75 transition-opacity duration-300">
      <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-2 md:p-3">
        <p class="text-xs md:text-sm text-violet-300 font-semibold">Urban Garden</p>
      </div>
    </div>
  </div>

  <!-- The Lightbox Modal -->
  <div id="lightbox-modal" class="fixed inset-0 z-50 hidden bg-neutral-950/70 dark:bg-black/80 backdrop-blur-md flex items-center justify-center p-4 sm:p-6 lg:p-8 transition-opacity duration-300 opacity-0">
    <div class="relative w-full max-w-5xl bg-neutral-900 dark:bg-neutral-800 rounded-lg shadow-2xl border border-purple-800 dark:border-fuchsia-900 transform transition-all duration-300 scale-95">
      <!-- Close button -->
      <button class="absolute top-3 right-3 text-violet-300 hover:text-fuchsia-400 text-3xl font-bold leading-none z-10 transition-colors duration-200" onclick="closeLightbox()">
        &times;
      </button>

      <div class="flex flex-col lg:flex-row">
        <!-- Lightbox Image -->
        <div class="flex-shrink-0 lg:w-2/3 p-4">
          <img id="lightbox-image" src="" alt="" class="w-full h-auto object-contain rounded-md border border-purple-700 dark:border-fuchsia-800">
        </div>

        <!-- Image Details -->
        <div class="lg:w-1/3 p-4 flex flex-col justify-between overflow-y-auto max-h-[80vh]">
          <div>
            <h3 id="lightbox-title" class="text-xl md:text-2xl font-bold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-fuchsia-500 drop-shadow-sm"></h3>
            <p id="lightbox-description" class="text-sm md:text-base text-violet-300 mb-4"></p>

            <div class="space-y-1 text-xs md:text-sm text-violet-400/80">
              <p><strong class="text-purple-300">// Date:</strong> <span id="lightbox-meta1"></span></p>
              <p><strong class="text-purple-300">// Status:</strong> <span id="lightbox-meta2"></span></p>
              <p><strong class="text-purple-300">// Ref_ID:</strong> <span id="lightbox-meta3"></span></p>
            </div>
          </div>

          <!-- Action Buttons / Other Info -->
          <div class="mt-6 pt-4 border-t border-purple-800/50">
            <button class="w-full bg-gradient-to-r from-purple-700 to-fuchsia-700 hover:from-purple-600 hover:to-fuchsia-600 text-white font-semibold py-2 px-4 rounded-md transition-all duration-300 drop-shadow-lg text-sm md:text-base">
              Download Log Data <span class="ml-1">&gt;</span>
            </button>
            <p class="text-xs text-violet-500 mt-2 text-center">Secure Protocol v3.1_AX</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Simple toggle for dark mode (for demonstration) -->
  <div class="fixed bottom-4 left-4 p-2 bg-neutral-800/70 border border-purple-800 rounded-lg shadow-lg flex items-center space-x-2">
    <label for="dark-mode-toggle" class="text-violet-300 text-xs md:text-sm">Dark Mode</label>
    <input type="checkbox" id="dark-mode-toggle" class="w-4 h-4 text-fuchsia-500 bg-neutral-700 border-purple-600 rounded focus:ring-fuchsia-500" onclick="document.documentElement.classList.toggle('dark')">
  </div>

  <script>
    function openLightbox(imageUrl, title, description, meta1, meta2, meta3) {
      const lightbox = document.getElementById('lightbox-modal');
      document.getElementById('lightbox-image').src = imageUrl;
      document.getElementById('lightbox-title').textContent = title;
      document.getElementById('lightbox-description').textContent = description;
      document.getElementById('lightbox-meta1').textContent = meta1;
      document.getElementById('lightbox-meta2').textContent = meta2;
      document.getElementById('lightbox-meta3').textContent = meta3;
      lightbox.classList.remove('hidden', 'opacity-0');
      lightbox.classList.add('flex');
      setTimeout(() => {
        lightbox.classList.remove('opacity-0');
        document.querySelector('#lightbox-modal > div').classList.remove('scale-95');
        document.querySelector('#lightbox-modal > div').classList.add('scale-100');
      }, 50);
    }

    function closeLightbox() {
      const lightbox = document.getElementById('lightbox-modal');
       document.querySelector('#lightbox-modal > div').classList.remove('scale-100');
       document.querySelector('#lightbox-modal > div').classList.add('scale-95');
      lightbox.classList.add('opacity-0');
      setTimeout(() => {
        lightbox.classList.remove('flex');
        lightbox.classList.add('hidden');
      }, 300);
    }

    // Close lightbox on escape key
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') {
        closeLightbox();
      }
    });

    // Close lightbox when clicking outside the content
    document.getElementById('lightbox-modal').addEventListener('click', (e) => {
      if (e.target.id === 'lightbox-modal') {
        closeLightbox();
      }
    });
  </script>
</div>

Navigation de la carte des nouvelles de l’agriculture

Un composant de navigation simple, inspiré du papier/de l’impression, comprenant une carte d’actualités pour l’agriculture et les sites Web agricoles, utilisant une palette de couleurs analogue. Il est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-amber-100 dark:bg-gray-800 p-4 shadow-md font-serif border-b-4 border-amber-300 dark:border-gray-700">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <a href="#" class="text-xl font-bold text-amber-900 dark:text-amber-100 flex items-center mb-4 md:mb-0">
      <svg class="w-8 h-8 mr-2 text-lime-700 dark:text-lime-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm4-1a1 1 0 00-1 1v4a1 1 0 102 0V9a1 1 0 00-1-1z" clip-rule="evenodd"></path>
      </svg>
      AgriConnect
    </a>

    <div class="md:hidden flex items-center">
      <button id="menu-button" class="text-amber-900 dark:text-amber-100 focus:outline-none focus:ring-2 focus:ring-amber-500 rounded-md p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <div id="menu" class="hidden md:flex md:flex-grow md:items-center md:w-auto w-full mt-4 md:mt-0">
      <ul class="flex flex-col md:flex-row md:ml-auto md:space-x-8 space-y-2 md:space-y-0 w-full md:w-auto">
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Home</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">News</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Resources</a></li>
        <li><a href="#" class="block text-amber-800 dark:text-amber-200 hover:text-amber-950 dark:hover:text-amber-500 py-2 px-3 rounded-md transition-colors duration-200 ease-in-out border-b-2 border-transparent hover:border-amber-500 dark:hover:border-amber-300">Contact</a></li>
      </ul>
    </div>

    <div class="w-full md:w-auto mt-4 md:mt-0 md:ml-8">
      <div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-sm border border-amber-200 dark:border-gray-600 flex flex-col md:flex-row items-center space-y-3 md:space-y-0 md:space-x-3 max-w-sm mx-auto md:mx-0">
        <img class="w-16 h-16 rounded-full object-cover border-2 border-amber-300 dark:border-gray-500" src="https://picsum.photos/seed/farmnews/60/60" alt="News thumbnail">
        <div class="flex-grow text-center md:text-left">
          <p class="text-sm font-semibold text-amber-900 dark:text-amber-100 mb-1 leading-tight">Latest: Sustainable Farming Practices</p>
          <a href="#" class="text-xs text-lime-700 dark:text-lime-300 hover:underline">Read More &rarr;</a>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const menuButton = document.getElementById('menu-button');
      const menu = document.getElementById('menu');

      menuButton.addEventListener('click', function() {
        menu.classList.toggle('hidden');
      });
    });
  </script>
</nav>

1 ... 46 47 48 49 50 ... 282

Catégories

Tous les composants