Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Disposition de la grille de jeu Art déco

Une grille de jeu réactive inspirée de l’Art déco avec des motifs géométriques, des couleurs en niveaux de gris et des éléments interactifs. Conçu pour les sites Web et les interfaces de jeux, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50 font-sans p-4 sm:p-8 transition-colors duration-300">

  <!-- Grid Container -->
  <div class="container mx-auto max-w-7xl grid gap-4 lg:gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

    <!-- Main Feature Game Card (First Row Spanning) -->
    <div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 ">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>

      <img src="https://picsum.photos/1200/800?random=1" alt="Featured Game" class="w-full h-80 md:h-96 object-cover object-center transform scale-100 hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="absolute bottom-0 left-0 right-0 p-4 sm:p-6 bg-gradient-to-t from-gray-900/90 to-transparent">
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-2 text-gray-50 drop-shadow-lg leading-tight">Cosmic Odyssey: Starfall</h2>
        <p class="text-gray-200 text-sm sm:text-base font-medium flex items-center mb-4">
          <svg class="w-4 h-4 mr-1 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>
          Released: 2023-11-15
        </p>
        <button class="px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
          <span class="relative z-10">Play Now</span>
          <span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
        </button>
      </div>
    </div>

    <!-- Game Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
      <img src="https://picsum.photos/600/400?random=2" alt="Game One" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="p-4 relative z-10">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Neon City Racers</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">High-octane futuristic racing.</p>
        <div class="mt-4 flex justify-between items-center">
          <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">Action</span>
          <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
            <svg class="w-5 h-5" 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 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Game Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 transform hover:-translate-y-1 hover:shadow-2xl transition-all duration-300 ease-in-out">
      <img src="https://picsum.photos/600/400?random=3" alt="Game Two" class="w-full h-48 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out">
      <div class="p-4 relative z-10">
        <h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-100">Aetherian Chronicles</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm">Epic fantasy RPG adventure.</p>
        <div class="mt-4 flex justify-between items-center">
          <span class="px-3 py-1 text-xs font-semibold rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300">RPG</span>
          <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200">
            <svg class="w-5 h-5" 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 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Latest News/Blog Card -->
    <div class="lg:col-span-2 relative overflow-hidden rounded-lg shadow-xl dark:shadow-2xl bg-gradient-to-tl from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-900 border-2 border-gray-300 dark:border-gray-700 p-4 sm:p-6 flex flex-col justify-between">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat opacity-10 dark:opacity-5" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'20\' height=\'20\' viewBox=\'0 0 20 20\' xmlns=\'http://www.w3.org/2000/svg\'><g fill=\'%23000\' fill-opacity=\'0.1\'><path d=\'M0 0h1v20H0zM0 0h20v1H0zM19 0h1v20h-1zM0 19h20v1H0z\'/><rect x=\'5\' y=\'5\' width=\'10\' height=\'10\' fill=\'%23000\' opacity=\'0.2\'/><path d=\'M10 0v20M0 10h20\' stroke=\'%23000\' stroke-width=\'0.5\' opacity=\'0.1\'/></g></svg>');"></div>

      <h2 class="text-2xl sm:text-3xl font-bold mb-4 text-gray-900 drop-shadow-md dark:text-gray-50 relative z-10">Latest Intel</h2>

      <div class="space-y-4 relative z-10">
        <!-- News Item 1 -->
        <div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
          <img src="https://picsum.photos/50/50?random=4" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">New Patch incoming: 'The Void Gazer'</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Discover the new content, bug fixes, and balance changes for your favorite game.</p>
            <span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">2 hours ago</span>
          </div>
        </div>

        <!-- News Item 2 -->
        <div class="bg-gray-50 dark:bg-gray-950 p-3 rounded-md border border-gray-200 dark:border-gray-800 flex items-start space-x-3 group hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200">
          <img src="https://picsum.photos/50/50?random=5" alt="News Thumbnail" class="w-16 h-16 rounded-md object-cover flex-shrink-0">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-gray-50">Dev AMA Session Recap: Future of the game revealed!</p>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Highlights from our recent Ask Me Anything session with the development team.</p>
            <span class="text-xs text-gray-500 dark:text-gray-400 block mt-2">Yesterday</span>
          </div>
        </div>
      </div>

      <button class="mt-6 w-full px-6 py-3 bg-gray-50 border-2 border-gray-50 text-gray-900 font-semibold rounded-full shadow-lg hover:bg-gray-200 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group z-10">
        <span class="relative z-10">Read All News</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

    <!-- Leaderboard Card -->
    <div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Top Players</h3>
      <div class="space-y-3">
        <!-- Player 1 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">1.</span>
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Axton_Prime</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 1,230,456</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🏆</span>
        </div>
        <!-- Player 2 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">2.</span>
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Shadow_Queen</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 987,654</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥈</span>
        </div>
         <!-- Player 3 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <span class="font-extrabold text-2xl text-gray-700 dark:text-gray-300">3.</span>
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Player Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-gray-400 dark:border-gray-600 flex-shrink-0">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">Vortex_Hunter</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Score: 876,543</p>
          </div>
          <span class="text-lg font-bold text-gray-800 dark:text-gray-100">🥉</span>
        </div>
      </div>
      <button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group ">
        <span class="relative z-10">View Full Leaderboard</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

    <!-- Community/Stream Card -->
    <div class="relative overflow-hidden rounded-lg shadow-lg dark:shadow-xl bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-4 sm:p-6 flex flex-col">
      <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-50">Live Streams</h3>
      <div class="space-y-3">
        <!-- Stream Item 1 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">GamerGirl_Lexa <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Playing: Cosmic Odyssey</p>
          </div>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
          </a>
        </div>
        <!-- Stream Item 2 -->
        <div class="flex items-center space-x-3 border-b pb-3 border-gray-200 dark:border-gray-700 last:border-b-0 last:pb-0">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Streamer Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-red-500 flex-shrink-0 animate-pulse">
          <div class="flex-grow">
            <p class="font-semibold text-gray-800 dark:text-gray-100">ProGamer_Xero <span class="text-red-500 text-xs font-bold ml-1">LIVE</span></p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Playing: Neon City Racers</p>
          </div>
          <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50 transition-colors duration-200">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm14.553 5.356A1.5 1.5 0 0117 12.004v1.992a1.5 1.5 0 01-2.447 1.156l-3.371-2.106a1.5 1.5 0 010-2.312l3.371-2.106zM9 10a1 1 0 011-1h6a1 1 0 011 1v4a1 1 0 01-1 1h-6a1 1 0 01-1-1v-4z"></path><path d="M2 13a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2z"></path></svg>
          </a>
        </div>
      </div>
      <button class="mt-6 w-full px-6 py-3 bg-gray-200 border border-gray-200 text-gray-800 font-semibold rounded-full shadow-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 focus:ring-opacity-75 relative overflow-hidden group">
        <span class="relative z-10">Join Community</span>
        <span class="absolute inset-0 bg-gradient-to-r from-gray-500 to-gray-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
      </button>
    </div>

  </div>
</div>

Composant d’affichage des prix

Un composant d’affichage des prix ludique et joyeux avec des éléments arrondis et une palette de couleurs analogue, adapté à un portfolio pour présenter des travaux ou des produits. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased p-4 sm:p-8 md:p-12 bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 dark:from-purple-900 dark:via-pink-900 dark:to-rose-900 min-h-screen flex items-center justify-center">
  <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Pricing Card 1: Basic -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-purple-300 dark:border-purple-600 group">
      <div class="p-6 sm:p-8 text-center bg-purple-200 dark:bg-purple-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-purple-900 dark:text-purple-100 mb-2">Starter</h3>
        <p class="text-purple-700 dark:text-purple-200 text-base sm:text-lg">Perfect for hobbyists & individuals.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-pink-500 dark:text-pink-300">$</span>19
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>5 Project Spaces</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>10GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Basic Support</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-pink-500 dark:bg-pink-400 hover:bg-pink-600 dark:hover:bg-pink-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-600">
          Choose Plan
        </button>
      </div>
    </div>

    <!-- Pricing Card 2: Pro (Recommended) -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-rose-400 dark:border-rose-700 scale-105 relative z-10 group">
      <div class="absolute -top-3 right-0 bg-rose-500 dark:bg-rose-600 text-white dark:text-gray-100 text-xs sm:text-sm font-bold px-4 py-1.5 rounded-bl-lg rounded-tr-3xl shadow-md transform rotate-3 origin-top-right">Most Popular</div>
      <div class="p-6 sm:p-8 text-center bg-rose-300 dark:bg-rose-800 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-rose-900 dark:text-rose-100 mb-2">Pro</h3>
        <p class="text-rose-700 dark:text-rose-200 text-base sm:text-lg">For growing teams & ambitious projects.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-orange-600 dark:text-orange-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-orange-500 dark:text-orange-300">$</span>49
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Unlimited Projects</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>100GB Storage</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Priority Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Domains</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 hover:bg-orange-600 dark:hover:bg-orange-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
          Get Started Now
        </button>
      </div>
    </div>

    <!-- Pricing Card 3: Enterprise -->
    <div class="flex flex-col bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 overflow-hidden border-4 border-yellow-300 dark:border-yellow-600 group">
      <div class="p-6 sm:p-8 text-center bg-yellow-200 dark:bg-yellow-700 rounded-t-3xl">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-yellow-900 dark:text-yellow-100 mb-2">Enterprise</h3>
        <p class="text-yellow-700 dark:text-yellow-200 text-base sm:text-lg">Scale your business with dedicated support.</p>
      </div>
      <div class="flex-grow p-6 sm:p-8 flex flex-col items-center">
        <div class="text-5xl sm:text-6xl font-extrabold text-green-600 dark:text-green-400 mb-4">
          <span class="text-3xl sm:text-4xl align-top text-green-500 dark:text-green-300">$</span>99
          <span class="text-xl sm:text-2xl text-gray-500 dark:text-gray-400">/month</span>
        </div>
        <ul class="text-center text-gray-700 dark:text-gray-300 space-y-3 mb-8 text-base sm:text-lg">
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>All Pro Features</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Dedicated Account Manager</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Premium Support</li>
          <li class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Custom Integrations</li>
        </ul>
      </div>
      <div class="p-6 sm:p-8 pt-0">
        <button class="w-full py-3 px-6 rounded-full font-bold text-lg text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 hover:bg-green-600 dark:hover:bg-green-300 transition-colors duration-300 shadow-md group-hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600">
          Contact Sales
        </button>
      </div>
    </div>
  </div>
</div>

Menu déroulant du mode sombre Cyberpunk

Un composant de menu déroulant complexe, sur le thème du cyberpunk, pour un tableau de bord, avec des arrière-plans sombres, des couleurs en niveaux de gris avec de subtils accents vifs et une réactivité totale.

Ouvrir Aperçu

                <div class="relative inline-block text-left font-mono z-50">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gradient-to-br from-gray-900 to-black dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-all duration-300 ease-in-out group" id="menu-button" aria-expanded="true" aria-haspopup="true">
      <span class="h-4 w-4 mr-2 text-blue-400 group-hover:text-blue-300 transition-colors duration-200">&#9679;</span>
      Dashboard Filters
      <svg class="-mr-1 ml-2 h-5 w-5 text-gray-500 dark:text-gray-400 group-hover:text-gray-300 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 sm:w-64 md:w-72 lg:w-80 rounded-md shadow-lg bg-gradient-to-br from-gray-950 to-black dark:from-gray-900 dark:to-gray-950 ring-1 ring-inset ring-gray-700 dark:ring-gray-800 focus:outline-none transform scale-y-0 opacity-0 group-focus-within:scale-y-100 group-focus-within:opacity-100 transition-all duration-300 ease-out" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Search/Filter Input -->
      <div class="px-4 py-2">
        <input type="text" placeholder="Search options..." class="w-full px-3 py-2 text-sm bg-gray-800 dark:bg-gray-800 border border-gray-700 dark:border-gray-700 rounded-md text-gray-100 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition-colors duration-200" />
      </div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Data Streams</div>

      <!-- Menu Items - Checkboxes -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Real-time Metrics</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Historical Logs</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">System Alerts</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Section Header -->
      <div class="px-4 py-2 text-xs font-semibold text-gray-400 uppercase tracking-wider border-b border-gray-800 dark:border-gray-800">Time Range</div>

      <!-- Menu Items - Radio Buttons (simulated) -->
      <div class="py-1">
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500" checked>
          <span class="ml-2 font-light">Last Hour</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 24 Hours</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Last 7 Days</span>
        </label>
        <label class="flex items-center px-4 py-2 text-sm text-gray-200 dark:text-gray-100 hover:bg-gray-800 dark:hover:bg-gray-800 hover:text-blue-400 transition-colors duration-150 cursor-pointer" role="menuitem" tabindex="-1">
          <input type="radio" name="time-range" class="form-radio h-4 w-4 text-blue-500 border-gray-600 bg-gray-700 dark:bg-gray-700 dark:border-gray-600 rounded-full focus:ring-blue-400 checked:bg-blue-600 checked:border-transparent accent-blue-500">
          <span class="ml-2 font-light">Custom Range...</span>
        </label>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-800 dark:border-gray-800 my-1"></div>

      <!-- Action Buttons -->
      <div class="py-1 px-4 flex justify-between space-x-2" role="none">
        <button class="w-full inline-flex justify-center rounded-md border border-gray-700 dark:border-gray-600 shadow-sm px-4 py-2 bg-gray-800 dark:bg-gray-700 text-sm font-medium text-gray-300 dark:text-gray-200 hover:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Reset</button>
        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900 dark:focus:ring-blue-500 transition-colors duration-200">Apply</button>
      </div>
    </div>
  </div>
</div>

Accordéon Bauhaus pour les organisations à but non lucratif

Un composant d’accordéon simple et réactif conçu avec des influences Bauhaus et une palette de couleurs chaudes de coucher de soleil, adapté aux organisations à but non lucratif. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="max-w-xl mx-auto p-4 sm:p-6 lg:p-8 bg-amber-50 dark:bg-gray-900 rounded-lg shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-700 dark:text-orange-400 mb-6 text-center tracking-tight leading-tight uppercase relative">
    <span class="block">Our Mission</span>
    <span class="absolute left-1/2 -translate-x-1/2 bottom-0 w-20 h-2 bg-red-500 dark:bg-red-700"></span>
  </h2>

  <div class="space-y-4">
    <!-- Accordion Item 1 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">What is our primary goal?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform 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="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">Our primary goal is to empower communities through sustainable initiatives, focusing on education, health, and environmental preservation.</p>
      </div>
    </div>

    <!-- Accordion Item 2 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How do we achieve our impact?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform 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="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">We work directly with local partners, implement needs-based programs, and rely on the generosity of volunteers and donors to make a lasting difference.</p>
      </div>
    </div>

    <!-- Accordion Item 3 -->
    <div x-data="{ open: false }" class="border border-orange-300 dark:border-amber-600 rounded-md overflow-hidden shadow-sm">
      <button @click="open = !open" class="flex justify-between items-center w-full p-4 text-left bg-orange-200 dark:bg-amber-700 hover:bg-orange-300 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-gray-900 transition duration-300 ease-in-out">
        <span class="font-semibold text-lg text-orange-900 dark:text-amber-100">How can I get involved or donate?</span>
        <svg :class="{ 'rotate-180': open, '': !open }" class="w-6 h-6 text-orange-800 dark:text-amber-200 transform 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="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div x-show="open" x-collapse.duration.300ms class="p-4 bg-orange-50 dark:bg-amber-900 text-orange-800 dark:text-amber-200 border-t border-orange-300 dark:border-amber-600">
        <p class="text-base leading-relaxed">You can volunteer your time, make a one-time donation, or set up a recurring gift. Visit our 'Get Involved' page for more details on how your support makes a difference.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 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-amber-50 bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 animate-pulse-slow transition duration-300 ease-in-out">
      <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4-4m0 0l-4-4m4 4H3"></path></svg>
      Learn More & Donate
    </a>
  </div>
</div>

<!-- Alpine.js for interactivity (required for accordion functionality) -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>

Industrial_Vibrant_Pagination_Component

Un composant de pagination complexe, de style industriel, avec des couleurs vives, conçu pour les sites Web à but non lucratif/caritatifs. Présente l’esthétique des matériaux bruts, les éléments exposés, et offre une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="flex items-center justify-between px-4 py-3 bg-gray-100 border-t border-b border-gray-300 dark:bg-gray-900 dark:border-gray-700 sm:px-6" aria-label="Pagination">
  <div class="flex-1 flex justify-between sm:hidden">
    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200">
      <svg class="h-5 w-5 mr-2 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 19L8 12L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      Previous
    </a>
    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200">
      Next
      <svg class="h-5 w-5 ml-2 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M9 5L16 12L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </a>
  </div>
  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
    <div>
      <p class="text-sm text-gray-700 dark:text-gray-300">
        Showing
        <span class="font-medium text-emerald-600 dark:text-emerald-400">1</span>
        to
        <span class="font-medium text-emerald-600 dark:text-emerald-400">10</span>
        of
        <span class="font-medium text-emerald-600 dark:text-emerald-400">97</span>
        results
      </p>
    </div>
    <div>
      <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M15 19L8 12L15 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
        <!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
        <a href="#" aria-current="page" class="z-10 relative inline-flex items-center px-4 py-2 border text-sm font-medium bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-lg dark:from-indigo-700 dark:to-purple-800 transform scale-105 transition-all duration-300">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          2
        </a>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">
          ...
        </span>
        <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          9
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors duration-200">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5 stroke-current text-purple-600 dark:text-purple-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 5L16 12L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </nav>
    </div>
  </div>
</nav>

RetroMedicalFiltersComponent

Un composant réactif de filtres de style rétro/vintage pour les applications de santé, avec des couleurs automnales et la prise en charge du mode sombre. Il comprend des options de filtre interactives pour les catégories, la plage de dates et le statut.

Ouvrir Aperçu

                <div class="font-sans bg-amber-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 md:p-8 lg:p-12 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-amber-200 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform rotate-z-1 perspective-1000 origin-top-left transition-all duration-500 group relative filter-panel border-4 border-amber-800 dark:border-stone-700">

    <!-- Retro Top Bar -->
    <div class="bg-amber-800 dark:bg-stone-700 p-3 flex items-center justify-between border-b-4 border-amber-900 sticky top-0 z-10 shadow-md">
      <h2 class="text-orange-50 text-xl md:text-2xl font-bold tracking-wide uppercase font-mono drop-shadow-md">Patient Filters</h2>
      <div class="flex space-x-2">
        <div class="w-3 h-3 rounded-full bg-red-400 border border-red-600"></div>
        <div class="w-3 h-3 rounded-full bg-yellow-400 border border-yellow-600"></div>
        <div class="w-3 h-3 rounded-full bg-green-400 border border-green-600"></div>
      </div>
    </div>

    <!-- Main Filter Controls -->
    <div class="p-4 sm:p-6 space-y-6">

      <!-- Search Input -->
      <div class="relative">
        <input type="text" placeholder="Search by patient ID or name..." class="w-full p-3 pl-10 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 placeholder-amber-700 dark:placeholder-stone-500 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-sm shadow-inner transition-all duration-200" aria-label="Search patient">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-amber-700 dark:text-stone-500 w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>

      <!-- Filter Options Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">

        <!-- Category Filter -->
        <div>
          <label for="category" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Category</label>
          <select id="category" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Select Category</option>
            <option value="appointments" class="text-stone-800 dark:text-stone-200">Appointments</option>
            <option value="prescriptions" class="text-stone-800 dark:text-stone-200">Prescriptions</option>
            <option value="lab_results" class="text-stone-800 dark:text-stone-200">Lab Results</option>
            <option value="medical_history" class="text-stone-800 dark:text-stone-200">Medical History</option>
            <option value="billing" class="text-stone-800 dark:text-stone-200">Billing</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700 dark:text-stone-500">
          </div>
        </div>

        <!-- Date Range Filter -->
        <div>
          <label for="date-start" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Date Range</label>
          <div class="flex space-x-2">
            <input type="date" id="date-start" class="w-1/2 p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-base shadow-inner transition-all duration-200" aria-label="Start Date">
            <input type="date" id="date-end" class="w-1/2 p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none font-mono text-base shadow-inner transition-all duration-200" aria-label="End Date">
          </div>
        </div>

        <!-- Status Filter -->
        <div>
          <label for="status" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Status</label>
          <select id="status" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Any Status</option>
            <option value="completed" class="text-stone-800 dark:text-stone-200">Completed</option>
            <option value="pending" class="text-stone-800 dark:text-stone-200">Pending</option>
            <option value="cancelled" class="text-stone-800 dark:text-stone-200">Cancelled</option>
            <option value="scheduled" class="text-stone-800 dark:text-stone-200">Scheduled</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-amber-700 dark:text-stone-500">
          </div>
        </div>

        <!-- Department Filter -->
        <div>
          <label for="department" class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Department</label>
          <select id="department" class="w-full p-3 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none appearance-none font-mono text-base shadow-inner transition-all duration-200">
            <option value="" disabled selected class="text-amber-700 dark:text-stone-500">Select Department</option>
            <option value="cardiology" class="text-stone-800 dark:text-stone-200">Cardiology</option>
            <option value="pediatrics" class="text-stone-800 dark:text-stone-200">Pediatrics</option>
            <option value="oncology" class="text-stone-800 dark:text-stone-200">Oncology</option>
            <option value="neurology" class="text-stone-800 dark:text-stone-200">Neurology</option>
          </select>
        </div>

        <!-- Gender Filter (Radio Buttons) -->
        <fieldset>
          <legend class="block text-amber-800 dark:text-stone-300 text-sm font-bold mb-2 uppercase tracking-tight font-mono">Gender</legend>
          <div class="flex items-center space-x-4 bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md p-3">
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="all" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150" checked>
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">All</span>
            </label>
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="male" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150">
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">Male</span>
            </label>
            <label class="inline-flex items-center cursor-pointer">
              <input type="radio" name="gender" value="female" class="form-radio h-4 w-4 text-orange-600 appearance-none bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-full checked:ring-2 checked:ring-orange-600 checked:bg-orange-600 focus:outline-none transition-all duration-150">
              <span class="ml-2 text-stone-800 dark:text-stone-200 font-mono text-sm">Female</span>
            </label>
          </div>
        </fieldset>

        <!-- Has Alerts (Checkbox) -->
        <div class="flex items-center bg-amber-100 dark:bg-stone-900 border-2 border-amber-600 dark:border-stone-600 rounded-md p-3 justify-start md:justify-center">
          <input type="checkbox" id="has-alerts" class="form-checkbox h-5 w-5 text-orange-600 bg-amber-300 dark:bg-stone-700 border-amber-700 dark:border-stone-500 rounded-sm focus:ring-2 focus:ring-orange-600 focus:border-orange-600 transition-all duration-150" aria-label="Has Alerts">
          <label for="has-alerts" class="ml-3 text-stone-800 dark:text-stone-200 font-mono text-sm">Patients with Alerts</label>
        </div>

      </div>
    </div>

    <!-- Apply & Reset Buttons -->
    <div class="bg-amber-300 dark:bg-stone-800 p-4 sm:p-6 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0 sm:space-x-4 border-t-4 border-amber-800 dark:border-stone-700">
      <button class="w-full sm:w-auto px-6 py-3 bg-orange-600 text-white font-bold uppercase rounded-md text-lg tracking-wider hover:bg-orange-700 focus:outline-none focus:ring-4 focus:ring-orange-300 active:bg-orange-800 transform hover:scale-105 transition-all duration-200 ease-in-out font-mono shadow-md">
        Apply Filters
      </button>
      <button class="w-full sm:w-auto px-6 py-3 border-2 border-amber-800 dark:border-stone-600 text-amber-800 dark:text-stone-300 font-bold uppercase rounded-md text-lg tracking-wider hover:bg-amber-400 dark:hover:bg-stone-700 focus:outline-none focus:ring-4 focus:ring-amber-300 active:bg-amber-500 dark:active:bg-stone-600 transform hover:scale-105 transition-all duration-200 ease-in-out font-mono shadow-md">
        Reset Filters
      </button>
    </div>

  </div>
</div>

<style>
/* Basic retro 'monitor' effect for the panel */
.filter-panel {
  transform: rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 0.8s ease-in-out;
}

.filter-panel:hover {
  transform: rotateX(1deg) rotateY(1deg) scale(1.01);
}

/* Custom styles for select arrow */
select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23b57351%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z%22 clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25em;
}

.dark select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 20 20%22 fill%3D%22%23a1a1aa%22%3E%3Cpath fill-rule%3D%22evenodd%22 d%3D%22M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z%22 clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
}

/* Custom radio/checkbox styles */
input[type='radio']:checked + span::before, input[type='checkbox']:checked + label::before {
    display: none;
}

input[type='radio'] {
    border-radius: 9999px; /* full rounded */
}
input[type='checkbox'] {
    border-radius: 0.125rem; /* small rounded */
}

select option {
  background-color: var(--tw-bg-amber-100, #fefce8);
  color: var(--tw-text-stone-800, #292524);
}

.dark select option {
  background-color: var(--tw-bg-stone-900, #0c0a09);
  color: var(--tw-text-stone-200, #e7e5e4);
}

</style>

Social_Dating_Interactive_Component

Un composant complexe et interactif de plate-forme sociale/de rencontre conçu avec un style d’entreprise propre et digne de confiance utilisant une palette de couleurs violet/violet. Comprend une mise en page réactive et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 font-sans">

  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:flex md:items-center transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Left Section: Profile Card -->
    <div class="w-full md:w-1/3 p-6 sm:p-8 border-b md:border-b-0 md:border-r border-gray-100 dark:border-gray-700 bg-gradient-to-br from-purple-50 dark:from-purple-950 to-purple-100 dark:to-gray-900 flex flex-col items-center justify-center">
      <div class="relative w-32 h-32 rounded-full overflow-hidden mb-4 ring-4 ring-purple-400 dark:ring-purple-600 shadow-lg">
        <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/62.jpg" alt="Profile Picture">
        <div class="absolute bottom-0 right-0 w-8 h-8 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 flex items-center justify-center">
          <span class="text-white text-xs font-bold">✔</span>
        </div>
      </div>
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">Sophia Miller</h2>
      <p class="text-lg text-purple-700 dark:text-purple-300 font-semibold mb-1 text-center">28, Software Engineer</p>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-6 text-center">Based in New York City</p>

      <div class="flex space-x-4 mb-6">
        <button class="flex items-center justify-center w-12 h-12 rounded-full bg-purple-600 hover:bg-purple-700 text-white transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 22l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
        </button>
        <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
        <button class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-300 hover:bg-gray-400 text-gray-700 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 transition duration-300 transform hover:scale-110 shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="w-full">
        <label for="progress-match" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Compatibility Score</label>
        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
          <div class="bg-gradient-to-r from-purple-400 to-purple-600 h-2.5 rounded-full" style="width: 75%"></div>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">75% Match Found</p>
      </div>

    </div>

    <!-- Right Section: Interactive Elements -->
    <div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Discover More About Sophia</h3>

      <!-- Interactive Tabs -->
      <div class="mb-6">
        <div class="relative flex flex-wrap gap-2 md:gap-0 bg-gray-100 dark:bg-gray-700 rounded-lg p-1 transition-colors duration-200">
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 active-tab">
            About Me
          </button>
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Interests
          </button>
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Photos
          </button>
          <button class="group flex-1 py-2 px-3 text-center text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 hover:bg-purple-100 dark:hover:bg-purple-900 hover:text-purple-800 dark:hover:text-purple-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Questions
          </button>
          <!-- Active tab indicator - controlled by JS in a real app, but for static HTML, it's just styling -->
          <style>
            .active-tab {
              background-color: var(--tw-purple-600);
              color: white;
              box-shadow: var(--tw-shadow-lg);
            }
            .dark .active-tab {
              background-color: var(--tw-purple-700);
            }
            @media (min-width: 768px) {
              .active-tab {
                background-color: var(--tw-purple-600);
                color: white;
                box-shadow: var(--tw-shadow-lg);
              }
              .dark .active-tab {
                background-color: var(--tw-purple-700);
              }
            }
          </style>
        </div>
      </div>

      <!-- Tab Content: About Me -->
      <div class="flex-grow mb-6">
        <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">Bio</h4>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
          Passionate software engineer building scalable applications. Love exploring new technologies, hiking,
          and discovering hidden gems in the city. Looking for someone who shares my curiosity and sense of adventure.
        </p>

        <h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-3">Lifestyle</h4>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip="evenodd" />
            </svg>
            <span>Extrovert</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip="evenodd" />
            </svg>
            <span>Non-smoker</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17.07A8 8 0 012 19.5V20h16v-.5c0-.53-.093-1.054-.275-1.55l-1.071-1.07A3 3 0 0012.93 17.07z" />
            </svg>
            <span>Social Drinker</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-500" viewBox="0 0 20 20" fill="currentColor">
              <path d="M7 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm.083 14h5.834V4h-5.834zM13 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" opacity=".4" />
              <path fill-rule="evenodd" d="M7 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm.083 14h5.834V4h-5.834zM13 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd" />
            </svg>
            <span>Exercises weekly</span>
          </div>
        </div>
      </div>

      <!-- Call to Action / Interaction -->
      <div class="mt-auto pt-6 border-t border-gray-100 dark:border-gray-700 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
        <button class="flex-1 w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Send Message
        </button>
        <button class="flex-1 w-full border border-purple-600 text-purple-600 dark:border-purple-400 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-gray-700 font-bold py-3 px-6 rounded-lg text-lg shadow-md transition duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
          Suggest a Date
        </button>
      </div>

    </div>

  </div>

</div>

Composant de comparaison de produits

Un composant simple et réactif de comparaison de produits avec une esthétique Memphis Design, utilisant une palette de couleurs rétro/vintage. Conçu pour les outils CRM/Business, il prend en charge le mode sombre et affiche les principales fonctionnalités de deux produits.

Ouvrir Aperçu

                <div class="bg-amber-100 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-teal-400 mb-8 text-center tracking-tight uppercase relative">
      <span class="block">Compare Products</span>
      <span class="absolute top-full left-1/2 -translate-x-1/2 w-24 h-2 bg-pink-500 dark:bg-purple-500 rounded-full mt-2"></span>
    </h2>

    <div class="flex flex-col md:flex-row gap-6 lg:gap-8 justify-center items-stretch">

      <!-- Product Card 1 -->
      <div class="flex-1 bg-yellow-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-blue-600 dark:border-teal-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-24 h-24 bg-pink-500 dark:bg-purple-600 -rotate-45 transform translate-x-12 -translate-y-12"></div>
        <div class="absolute bottom-0 left-0 w-32 h-32 bg-teal-400 dark:bg-pink-600 rotate-45 transform -translate-x-16 translate-y-16"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-blue-800 dark:text-yellow-300 mb-4 text-center uppercase tracking-wider">Business Pro</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1015/150/150" alt="Product Lite" class="rounded-full w-24 h-24 object-cover border-4 border-blue-600 dark:border-teal-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The essential tools for growing teams.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Email</span> Marketing Suite
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Basic</span> Analytics Dashboard
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 dark:bg-teal-500 dark:hover:bg-teal-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Product Pro</span>
              <span class="absolute inset-0 bg-blue-700 dark:bg-teal-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="flex-1 bg-red-300 dark:bg-gray-800 rounded-3xl p-6 lg:p-8 shadow-xl relative overflow-hidden transform hover:scale-102 transition-all duration-300
                  border-4 border-pink-600 dark:border-purple-500 border-l-0 border-b-0 border-r-0 border-t-0 animate-pulse-border">
        <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 dark:bg-teal-600 rotate-45 transform translate-x-16 -translate-y-16"></div>
        <div class="absolute bottom-0 left-0 w-24 h-24 bg-yellow-500 dark:bg-pink-600 -rotate-45 transform -translate-x-12 translate-y-12"></div>

        <div class="relative z-10">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-purple-300 mb-4 text-center uppercase tracking-wider">Enterprise Max</h3>
          <div class="flex justify-center mb-6">
            <img src="https://picsum.photos/id/1025/150/150" alt="Product Pro" class="rounded-full w-24 h-24 object-cover border-4 border-pink-600 dark:border-purple-500 shadow-md">
          </div>
          <p class="text-gray-700 dark:text-gray-300 text-center mb-6 leading-relaxed">The ultimate solution for large-scale operations.</p>

          <ul class="space-y-3 mb-6 text-gray-800 dark:text-gray-200">
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Unlimited</span> CRM Contacts
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Advanced</span> Marketing Automation
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Custom</span> Reporting Engine
            </li>
            <li class="flex items-center text-sm sm:text-base">
              <svg class="w-5 h-5 text-green-600 dark:text-green-400 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              <span class="font-semibold">Dedicated</span> Account Manager
            </li>
          </ul>

          <div class="text-center">
            <a href="#" class="inline-block bg-pink-600 hover:bg-pink-700 dark:bg-purple-500 dark:hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 mt-4 relative overflow-hidden group">
              <span class="relative z-10">Choose Enterprise Max</span>
              <span class="absolute inset-0 bg-pink-700 dark:bg-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
            </a>
          </div>
        </div>
      </div>

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

<style>
/* Define pulse-border animation */
@keyframes pulse-border {
  0% { border-color: rgba(96, 165, 250, 0.5); }
  50% { border-color: rgba(96, 165, 250, 1); }
  100% { border-color: rgba(96, 165, 250, 0.5); }
}

.dark .animate-pulse-border {
    animation: none; /* Disable on dark mode to prevent visual conflict with dark color scheme */
}

.animate-pulse-border {
    animation: pulse-border 2s infinite ease-in-out;
}

/* Adjust for dark mode borders here if a similar effect is desired with dark colors */
.dark .bg-gray-800.border-teal-500.dark\\:border-teal-500 {
    animation: pulse-border-dark 2s infinite ease-in-out;
}

.dark .bg-gray-800.border-purple-500.dark\\:border-purple-500 {
    animation: pulse-border-darker 2s infinite ease-in-out;
}

@keyframes pulse-border-dark {
  0% { border-color: rgba(20, 184, 166, 0.5); }
  50% { border-color: rgba(20, 184, 166, 1); }
  100% { border-color: rgba(20, 184, 166, 0.5); }
}

@keyframes pulse-border-darker {
  0% { border-color: rgba(168, 85, 247, 0.5); }
  50% { border-color: rgba(168, 85, 247, 1); }
  100% { border-color: rgba(168, 85, 247, 0.5); }
}

</style>

Message de réussite Art Déco

Un composant de message de réussite inspiré de l’Art déco avec une palette de couleurs rétro/vintage, conçu pour les plateformes de divertissement/médias. Il présente des motifs géométriques, un style luxueux et est entièrement réactif avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 dark:bg-gray-900 bg-gray-50 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-lg shadow-2xl relative overflow-hidden
              bg-gradient-to-br from-amber-50 dark:from-gray-800 to-amber-200 dark:to-gray-700
              border-4 border-amber-300 dark:border-amber-600
              transform transition-all duration-300 ease-in-out hover:scale-[1.01]">

    <!-- Art Deco Geometric Background Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M0 5 L5 0 L10 5 L5 10 Z" fill="rgba(180, 150, 60, 0.5)" class="dark:fill-amber-700"></path>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
        <path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="rgba(180, 150, 60, 0.7)" stroke-width="1.5" class="dark:stroke-amber-800"/>
      </svg>
    </div>

    <div class="relative z-10 text-center">
      <!-- Diamond / Jewel Icon -->
      <div class="mb-6 mx-auto w-20 h-20 rounded-full bg-amber-400 dark:bg-amber-600 flex items-center justify-center shadow-lg transform rotate-45 border-4 border-amber-100 dark:border-amber-800 group-hover:scale-105 transition-transform duration-300">
        <svg class="w-10 h-10 text-white dark:text-amber-100 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18.25L2.83 11.08l.7-.71L10 16.83l6.47-6.47.7.71L10 18.25zm0-16.5L2.83 8.92l.7.71L10 2.17l6.47 6.47.7-.71L10 1.75z" clip-rule="evenodd"/>
        </svg>
      </div>

      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-100 leading-tight tracking-wider">
        <span class="block italic text-amber-700 dark:text-amber-300 text-lg mb-1">Ritz & Glamour Presents...</span>
        Success Unlocked!
      </h2>

      <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Your journey into the Golden Age of entertainment just got an upgrade.
        Prepare for a cinematic experience like no other.
      </p>

      <div class="flex justify-center flex-wrap gap-4">
        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-amber-600 text-white dark:bg-amber-700 dark:text-amber-50
                       shadow-lg hover:shadow-xl hover:bg-amber-700 dark:hover:bg-amber-800
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-700 dark:border-amber-800">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
          Explore New Features
        </button>

        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-white text-amber-700 dark:bg-gray-700 dark:text-amber-300
                       shadow-lg hover:shadow-xl hover:bg-gray-100 dark:hover:bg-gray-600
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-300 dark:border-amber-600">
          <svg class="w-5 h-5 mr-2" 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.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>
</div>

Playful_Farming_Content_Card

Une carte d’affichage de contenu simple, ludique et contrastée adaptée aux sites Web agricoles et agricoles, avec des éléments arrondis et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 bg-green-50 dark:bg-gray-800 font-sans">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Farm landscape">
    <div class="p-6 text-center">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-green-700 dark:text-green-400 mb-3 leading-tight">Harvesting Joy!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-base leading-relaxed mb-6">
        Discover the bounty of nature with our fresh, organic produce. From farm to table, we bring you the best!
      </p>
      <a href="#" class="inline-flex items-center px-6 py-3 rounded-full bg-yellow-400 text-green-800 dark:bg-yellow-500 dark:text-green-900 font-bold text-lg shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-600 transform transition-transform duration-200 hover:-translate-y-1">
        Learn More
        <svg class="ml-2 -mr-1 w-5 h-5" 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>

1 ... 57 58 59 60 61 ... 282

Catégories

Tous les composants