Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Skeuomorphic_Monochromatic_Auth_E-commerce

Un composant d’authentification complexe, skeuomorphe et monochromatique pour les applications de commerce électronique, doté de plusieurs éléments interactifs et d’un design réactif avec prise en charge du mode sombre. Il imite les interfaces du monde réel avec des commandes numériques.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-zinc-900 dark:to-zinc-800 font-sans">
  <div class="w-full max-w-md mx-auto bg-gradient-to-br from-gray-100 to-gray-300 dark:from-zinc-700 dark:to-zinc-900 rounded-3xl shadow-xl border border-gray-300 dark:border-zinc-700 p-8 transform transition-all duration-300 hover:shadow-2xl hover:scale-102">
    <div class="text-center mb-8">
      <svg class="mx-auto h-16 w-16 text-gray-700 dark:text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
      </svg>
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 drop-shadow-sm">Welcome Back!</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Manage your e-commerce experience.</p>
    </div>

    <div class="grid grid-cols-1 gap-6">
      <div class="relative">
        <input type="email" id="email" placeholder="" class="peer block w-full px-4 py-3 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-600 text-gray-800 dark:text-gray-200 placeholder-transparent transition-all duration-200" />
        <label for="email" class="absolute left-4 -top-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 px-1 transition-all duration-200 origin-left transform -translate-y-1/2 scale-75 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-1/2 peer-focus:bg-gray-200 dark:peer-focus:bg-zinc-800 peer-focus:text-gray-700 dark:peer-focus:text-gray-300 leading-none pointer-events-none">
          Email Address
        </label>
      </div>
      <div class="relative">
        <input type="password" id="password" placeholder="" class="peer block w-full px-4 py-3 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-600 text-gray-800 dark:text-gray-200 placeholder-transparent transition-all duration-200" />
        <label for="password" class="absolute left-4 -top-2 text-xs text-gray-500 dark:text-gray-400 bg-gray-200 dark:bg-zinc-800 px-1 transition-all duration-200 origin-left transform -translate-y-1/2 scale-75 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-1/2 peer-focus:bg-gray-200 dark:peer-focus:bg-zinc-800 peer-focus:text-gray-700 dark:peer-focus:text-gray-300 leading-none pointer-events-none">
          Password
        </label>
      </div>
    </div>

    <div class="flex items-center justify-between text-sm mt-4">
      <div class="flex items-center">
        <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 rounded border-gray-300 dark:border-zinc-700 bg-gray-200 dark:bg-zinc-800 text-gray-600 dark:text-gray-400 focus:ring-gray-500 dark:focus:ring-zinc-500 transition-colors duration-200">
        <label for="remember_me" class="ml-2 block text-gray-700 dark:text-gray-300">
          Remember me
        </label>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        Forgot Password?
      </a>
    </div>

    <button type="submit" class="w-full flex justify-center py-3 px-4 mt-8 rounded-xl bg-gradient-to-br from-gray-600 to-gray-800 dark:from-zinc-600 dark:to-zinc-800 text-white font-semibold shadow-lg hover:from-gray-700 hover:to-gray-900 dark:hover:from-zinc-700 dark:hover:to-zinc-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-700 dark:focus:ring-zinc-700 transition-all duration-200 transform active:scale-95 active:shadow-md">
      <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
      Sign In
    </button>

    <div class="relative mt-8">
      <div class="absolute inset-0 flex items-center" aria-hidden="true">
        <div class="w-full border-t border-gray-300 dark:border-zinc-700"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-gray-100 dark:bg-zinc-700 text-gray-500 dark:text-gray-400 rounded-full shadow-inner">Or continue with</span>
      </div>
    </div>

    <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
      <button type="button" class="w-full flex items-center justify-center py-3 px-4 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 font-medium shadow-md hover:border-gray-500 dark:hover:border-zinc-500 transition-all duration-200 transform active:scale-98">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M6.29 18.251c-.698-.59-.766-.884-.367-1.425.215-.29.414-.52.583-.715.169-.196.347-.384.53-.574.18-.182.34-.33.483-.448.14-.118.25-.22.33-.3.08-.08.15-.145.2-.18.05-.035.09-.06.12-.08.03-.02.05-.03.06-.04.01-.01.02-.01.02-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01 0-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01C9.697 10.999 10.5 10 10.5 10c.813-.813 1.62-.057 2.18-.124.717-.084 1.343-.223 1.95-.455.608-.232 1.139-.553 1.58-.934.44-.38.78-.79 1.015-1.22.232-.43.35-86.745-.35-1.35.3-.43.3-176.6-.7-227.1-.6-.28-.5-.81-.97-1.46-.47-.65-.89-1.26-1.26-1.83-.37-.57-.68-1.07-.93-1.49-.24-.42-.4-79-.19-.115-.115.115-.115 0 0 0 0 .115.115.115.172.172 0 0 0 0 .115-.115.115-.115 0 0 0 0 0-.115.115.115 0 0 0 0 0-.115.115.115 0-.115.115-.115c.67.67.67 1.34 0 2.01-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67.67-.671.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01C9.07 14.93 9.77 15.63 9.77 15.63c-.67-.67-1.34-.67-2.01 0-.67.67-.67 1.34 0 2.01.67.67 1.34.67 2.01 0 .67-.67.67-1.34 0-2.01-.67-.67-1.34-.67-2.01 0zM10 18c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0-4c-.55 0-1-.45-1-.999S9.45 12 10 12s1 .45 1 1.001S10.55 14 10 14zm0-4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.871v-6.985h-2.54V10h2.54V7.723c0-2.508 1.493-3.891 3.774-3.891 1.094 0 2.24.195 2.24.195v2.454H15.18c-1.24 0-1.62.772-1.62 1.56V10h2.773l-.443 2.89H13.56V20C18.342 19.127 22 14.99 22 10z" clip-rule="evenodd"></path>
        </svg>
        Facebook
      </button>
      <button type="button" class="w-full flex items-center justify-center py-3 px-4 rounded-xl bg-gray-200 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-300 font-medium shadow-md hover:border-gray-500 dark:hover:border-zinc-500 transition-all duration-200 transform active:scale-98">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path d="M17 6H3c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1s-.45 1-1 1zm0 4H3c-.55 0-1-.45-1-1s.45-1 1-1h14c.55 0 1 .45 1 1s-.45 1-1 1zM3 14h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1zm0 4h14c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1z"/>
          <path fill-rule="evenodd" d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.871v-6.985h-2.54V10h2.54V7.723c0-2.508 1.493-3.891 3.774-3.891 1.094 0 2.24.195 2.24.195v2.454H15.18c-1.24 0-1.62.772-1.62 1.56V10h2.773l-.443 2.89H13.56V20C18.342 19.127 22 14.99 22 10z" clip-rule="evenodd"></path>
        </svg>
        Google
      </button>
    </div>

    <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
      Don't have an account?
      <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200">
        Sign Up
      </a>
    </p>

    <div class="mt-6 text-center text-xs text-gray-500 dark:text-gray-500">
      <p>Need help? Contact support at <a href="mailto:[email protected]" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">[email protected]</a></p>
    </div>
  </div>
</div>

Glassmorphism Disposition du tableau de bord

Un composant complexe de mise en page de tableau de bord glassmorphism de couleur triadique avec une barre latérale, une zone de contenu principale et plusieurs panneaux translucides, entièrement réactif et avec prise en charge du mode sombre. Conçu pour la visualisation de données et les panneaux de contrôle.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-[#8A2BE2] via-[#FFD700] to-[#E24A00] dark:from-[#1A032F] dark:via-[#3E3400] dark:to-[#491600] flex flex-col lg:flex-row p-4 sm:p-6 lg:p-8 relative overflow-hidden">

  <!-- Background Circles for Glassmorphism Effect -->
  <div class="absolute top-1/4 left-1/2 w-48 h-48 sm:w-64 sm:h-64 bg-[#FFD700]/30 dark:bg-[#3E3400]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob lg:w-96 lg:h-96"></div>
  <div class="absolute bottom-1/4 right-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#E24A00]/30 dark:bg-[#491600]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 lg:w-96 lg:h-96"></div>
  <div class="absolute top-1/2 left-1/4 w-48 h-48 sm:w-64 sm:h-64 bg-[#8A2BE2]/30 dark:bg-[#1A032F]/30 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 lg:w-96 lg:h-96 hover:scale-110 transition-transform duration-500"></div>
  
  <!-- Global Glassmorphism Styles -->
  <style>
    .glass-panel {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      @apply text-white dark:text-gray-100;
    }
    .dark .glass-panel {
      background: rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
      33% { transform: translate(30px, -50px) scale(1.1) rotate(10deg); }
      66% { transform: translate(-20px, 20px) scale(0.9) rotate(-5deg); }
      100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
    }
    .animate-blob {
      animation: blob 7s ease-in-out infinite alternate;
    }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
  </style>

  <!-- Sidebar (Larger Screens) -->
  <aside class="glass-panel w-full lg:w-64 p-4 lg:p-6 mb-4 lg:mb-0 lg:mr-6 flex-shrink-0 z-10 flex flex-col">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-2xl font-bold font-spectral">Dashboard</h2>
      <button class="lg:hidden focus:outline-none">
        <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>
    <nav class="space-y-4 flex-grow">
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-5-.01v-2m-4.5 0h8.25m-6.75 3.01h9.75M9 5h.01M15 5h.01M19.75 12h.01"></path></svg>
        <span class="text-lg font-medium">Home</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <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="M7 12l3-3m0 0l3 3m-3-3v8m0-9a9 9 0 110 18 9 9 0 010-18z"></path></svg>
        <span class="text-lg font-medium">Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl bg-white/10">
        <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="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-lg font-medium">Reports</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
        <span class="text-lg font-medium">Settings</span>
      </a>
    </nav>
    <div class="mt-auto">
      <div class="flex items-center space-x-3 p-3 rounded-xl hover:bg-white/20 transition duration-300">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50">
        <div>
          <p class="font-semibold">Jane Doe</p>
          <p class="text-sm opacity-80">Admin</p>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content Area -->
  <main class="flex-grow grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min z-10">

    <!-- Metric Card 1 -->
    <div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-2">Total Sales</h3>
      <p class="text-4xl font-bold font-spectral text-[#FFD700] dark:text-[#FDD700]">$1,234,567</p>
      <p class="text-sm opacity-80 mt-2">+12.5% from last month</p>
      <div class="mt-4">
        <span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Monthly Goal</span>
      </div>
    </div>

    <!-- Metric Card 2 -->
    <div class="glass-panel p-6 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-2">New Users</h3>
      <p class="text-4xl font-bold font-spectral text-[#8A2BE2] dark:text-[#CD9BF4]">8,901</p>
      <p class="text-sm opacity-80 mt-2">+5.2% from last week</p>
      <div class="mt-4">
        <span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Weekly Trend</span>
      </div>
    </div>

    <!-- Metric Card 3 -->
    <div class="glass-panel p-6 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-2">Active Projects</h3>
      <p class="text-4xl font-bold font-spectral text-[#E24A00] dark:text-[#FF8C6B]">17</p>
      <p class="text-sm opacity-80 mt-2">3 projects pending review</p>
      <div class="mt-4">
        <span class="inline-block bg-white/20 rounded-full px-3 py-1 text-sm font-semibold">Portfolio Status</span>
      </div>
    </div>

    <!-- Sales Trends Chart (Placeholder) -->
    <div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-2 flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Sales Trends</h3>
      <div class="relative h-48 w-full bg-white/5 rounded-lg flex items-center justify-center">
        <img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart" class="w-full h-full object-cover rounded-lg opacity-80" loading="lazy">
        <p class="absolute text-lg font-medium text-white/70">Chart Placeholder</p>
      </div>
      <p class="text-sm opacity-80 mt-4">Data updated at 10:30 AM.</p>
    </div>

    <!-- Recent Activities -->
    <div class="glass-panel p-6 col-span-1 flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Recent Activities</h3>
      <ul class="space-y-4 text-sm">
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
          <p><span class="font-semibold">John Doe</span> updated project <span class="text-[#FFD700] dark:text-[#FDD700]">'Phoenix'</span>.</p>
        </li>
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#8A2BE2] mr-3 mt-2"></div>
          <p><span class="font-semibold">Jane Smith</span> commented on 'Monthly Report'.</p>
        </li>
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#E24A00] mr-3 mt-2"></div>
          <p><span class="font-semibold">Marketing Team</span> launched new campaign.</p>
        </li>
        <li class="flex items-start">
          <div class="flex-shrink-0 w-2 h-2 rounded-full bg-[#FFD700] mr-3 mt-2"></div>
          <p><span class="font-semibold">System</span> backup completed successfully.</p>
        </li>
      </ul>
    </div>

    <!-- Quick Actions -->
    <div class="glass-panel p-6 col-span-1 md:col-span-2 lg:col-span-1 flex flex-col justify-between">
      <h3 class="text-xl font-semibold mb-4">Quick Actions</h3>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          <span class="text-center text-sm">New Report</span>
        </button>
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
          <span class="text-center text-sm">Edit Profile</span>
        </button>
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M17 11h.01M9 15h.01M15 15h.01M3 15a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10z"></path></svg>
          <span class="text-center text-sm">Schedule Task</span>
        </button>
        <button class="flex flex-col items-center p-4 bg-white/10 rounded-xl hover:bg-white/20 transition duration-300">
          <svg class="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253m9 0c1.168-.776 2.754-1.253 4.5-1.253 1.746 0 3.332.477 4.5 1.253m-12 0V13m0-13a.997.997 0 01.07-2c.493-2 3.033-2 5-2s4.507 0 5 2a.997.997 0 01.07 2M4 15h3.586a1 1 0 01.707.293L12 19L16 15.293a1 1 0 01.707-.293H20M4 15c0 1.572 1.487 2.228 2.5 2V21a1 1 0 001 1h12a1 1 0 001-1v-2c1.013-.772 2.5-1.428 2.5-3"></path></svg>
          <span class="text-center text-sm">Support</span>
        </button>
      </div>
    </div>

  </main>

</div>

Composant Avis sur les produits

Un composant simple et réactif d’avis sur les produits adapté à un blog ou à un site de contenu, conçu selon les principes de la conception matérielle. Il dispose d’une palette de couleurs triadique et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 text-center tracking-tight leading-tight">
        Customer Reviews
      </h2>
      <div class="space-y-8">
        <!-- Review 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-blue-500 dark:ring-blue-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</p>
              <div class="flex text-yellow-500">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"This product exceeded my expectations!"</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              I've been using this for a few weeks now and I'm incredibly impressed. It's user-friendly, robust, and performs exactly as advertised. Highly recommend for anyone looking for a reliable solution. The material quality feels premium.
            </p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-purple-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-purple-500 dark:ring-purple-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300">David Lee</p>
              <div class="flex text-yellow-500">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 20 20"><path d="M10 15.27l-3.82 2.43 1.05-4.59-3.56-3.09 4.67-.4 1.86-4.22 1.86 4.22 4.67.4-3.56 3.09 1.05 4.59z"/></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Good value for the price, minor flaw."</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              Overall, I'm happy with my purchase. It does what it promises and is a good value. However, I noticed a small ding on the side upon arrival, which was a bit disappointing. Still, it functions perfectly.
            </p>
          </div>
        </div>

        <!-- Review 3 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-yellow-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-yellow-500 dark:ring-yellow-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-yellow-700 dark:text-yellow-300">Sarah Kim</p>
              <div class="flex text-yellow-500">
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Absolutely perfect, no complaints!"</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              From the moment I unboxed it, I knew this was a quality product. Setup was a breeze, and it works flawlessly. It's truly transformed my daily routine. A definite five-star experience!
            </p>
          </div>
        </div>

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

Brutalist_Infographics_Component_Earth_Tones

Un composant graphique d’inspiration brutaliste pour les sites Web d’entreprise, avec une typographie brute, un contraste élevé et des tons de terre. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <section class="bg-stone-200 dark:bg-stone-900 py-16 md:py-24 font-mono text-stone-800 dark:text-stone-300">
  <div class="container mx-auto px-6 max-w-7xl">
    <h1 class="text-4xl sm:text-5xl md:text-6xl uppercase font-extrabold mb-8 md:mb-12 text-center transform -skew-x-6 inline-block bg-stone-700 text-stone-100 dark:bg-stone-300 dark:text-stone-900 p-2 leading-none mx-auto block w-fit shadow-lg">
      Our <span class="text-amber-400 dark:text-lime-700">Impact</span>
    </h1>

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

      <!-- Infographic Card 1 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          +25%
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Revenue Growth
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Achieved significant year-over-year revenue growth through strategic market expansion.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          See Details →
        </a>
      </div>

      <!-- Infographic Card 2 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          420k+
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Users Engaged
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Expanded our user base with innovative features and compelling content.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          Explore Community →
        </a>
      </div>

      <!-- Infographic Card 3 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          85%+ 
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Customer Sat.
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Maintained high customer satisfaction scores through dedicated support.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          Read Testimonials →
        </a>
      </div>

      <!-- Infographic Card 4 -->
      <div class="bg-stone-100 dark:bg-stone-800 border-4 border-stone-900 dark:border-stone-100 p-6 flex flex-col items-start shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] transition-all duration-300 hover:-translate-y-2 hover:shadow-[12px_12px_0px_rgba(0,0,0,1)] dark:hover:shadow-[12px_12px_0px_rgba(255,255,255,1)]">
        <div class="text-6xl md:text-7xl font-black text-amber-500 dark:text-lime-600 mb-4 tracking-tight leading-none">
          Globally
        </div>
        <h3 class="text-2xl font-bold uppercase mb-3 border-b-4 border-amber-500 dark:border-lime-600 pb-2 leading-tight">
          Present in 12+
        </h3>
        <p class="text-sm text-stone-700 dark:text-stone-400 mb-4 flex-grow">
          Expanded our reach across multiple continents with localized solutions.
        </p>
        <a href="#" class="mt-auto text-amber-600 dark:text-lime-500 font-bold uppercase text-sm border-b-2 border-amber-600 dark:border-lime-500 hover:text-amber-800 dark:hover:text-lime-300 transition-colors duration-200">
          View Locations →
        </a>
      </div>

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

Flux d’activité monochromatique brutaliste

Un composant de flux d’activité simple, d’inspiration brutaliste, avec une palette de couleurs monochromatiques, adapté aux sites Web d’entreprise. Offre un contraste élevé, une typographie audacieuse et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-mono min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white bg-gray-200 dark:bg-gray-800 shadow-md transform -rotate-1 skew-x-1 p-0.5">
    <div class="bg-gray-50 dark:bg-gray-950 p-6 sm:p-8 lg:p-10 border-4 border-black dark:border-white transform rotate-1 -skew-x-1">
      <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-black dark:text-white uppercase leading-none skew-y-2 transform -translate-x-2">
        Activity <br class="sm:hidden"/>Feed
      </h2>

      <div class="space-y-6 sm:space-y-8 lg:space-y-10">
        <!-- Activity Item 1: New Project -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <span class="absolute -top-3 -left-3 bg-red-600 text-white text-xs px-2 py-1 uppercase font-bold transform rotate-6">NEW!</span>
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">John Doe</span> created <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Project Alpha'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">2 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 2: Task Update -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform rotate-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Jane Smith</span> updated <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Task #123'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">4 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 3: File Upload -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-5" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Robert Brown</span> uploaded <span class="text-black dark:text-white underline decoration-wavy decoration-2">'report_Q3.pdf'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">Yesterday</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-2 right-2 text-xs text-black dark:text-white font-bold transform -rotate-3">LIVE FEED</div>
  </div>
</div>

Brutalist_ECommerce_Table

Un composant de table de données réactif de style brutaliste pour le commerce électronique, doté d’un contraste élevé, d’un schéma de couleurs complémentaires (jaune/violet) et d’une prise en charge du mode sombre. Conçu pour les listes de produits ou la gestion des commandes.

Ouvrir Aperçu

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-yellow-100 dark:bg-purple-900 min-h-screen text-purple-900 dark:text-yellow-100 transition-colors duration-300">

  <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold mb-6 sm:mb-8 text-black dark:text-yellow-300 uppercase tracking-widest border-b-4 border-l-4 border-black dark:border-yellow-300 p-2 transform -skew-x-6 inline-block">
    Product Listings
  </h2>

  <div class="overflow-x-auto border-4 border-black dark:border-yellow-300 bg-purple-200 dark:bg-purple-950 shadow-brutalist">
    <table class="w-full text-left border-collapse">
      <thead class="border-b-4 border-black dark:border-yellow-300 bg-purple-500 dark:bg-purple-800 text-yellow-100 dark:text-yellow-100">
        <tr>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            ID
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            Product
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider hidden sm:table-cell border-r-4 border-black dark:border-yellow-300">
            Category
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
            Price
          </th>
          <th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider text-center">
            Actions
          </th>
        </tr>
      </thead>
      <tbody>
        <!-- Product 1 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#001</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=1" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Crude Widget X</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Electronics</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$19.99</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 2 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#002</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=2" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Bold Apparatus MKII</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Tools</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$45.00</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 3 -->
        <tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#003</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=3" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Raw Material A</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Material</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$7.50</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>

        <!-- Product 4 -->
        <tr class="even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#004</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
            <img src="https://picsum.photos/60/60?random=4" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
            <span class="font-semibold text-sm sm:text-base">Unrefined Gadget Z</span>
          </td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Components</td>
          <td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$12.25</td>
          <td class="p-3 sm:p-5 text-center">
            <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
            <button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="mt-8 flex justify-between items-center flex-wrap gap-4">
    <p class="text-sm sm:text-base font-bold text-black dark:text-yellow-300 tracking-wide">
      Showing 1 to 4 of 12 items
    </p>
    <div class="flex space-x-2">
      <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
        Prev
      </button>
      <button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
        Next
      </button>
    </div>
  </div>

</div>

<style>
  /* Brutalist Shadow for the table container */
  .shadow-brutalist {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }

  .dark .shadow-brutalist {
    box-shadow: 10px 10px 0px 0px var(--tw-color-yellow-300);
  }
</style>

Composant Boutons

Un ensemble de boutons interactifs conçus pour un portfolio, avec des micro-interactions, une palette de couleurs complémentaires et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex min-h-screen items-center justify-center bg-lime-50 py-12 dark:bg-slate-900 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-slate-800 dark:text-slate-100 sm:text-4xl">
        Showcase Your Work
      </h2>
      <p class="mt-2 text-lg text-lime-600 dark:text-lime-400">
        Click to explore interactive examples.
      </p>
    </div>

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

      <!-- Interactive Button 1: Project Details -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-lime-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-lime-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute inset-0 z-0 bg-gradient-to-r from-lime-600 to-green-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:from-lime-700 dark:to-green-600"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
          View Project
        </span>
      </button>

      <!-- Interactive Button 2: Live Demo -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-red-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-red-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute top-0 left-0 h-full w-0 bg-red-600 transition-all duration-300 ease-out group-hover:w-full dark:bg-red-700"></span>
        <span class="absolute right-0 bottom-0 h-full w-0 bg-red-600 transition-all duration-300 ease-out group-hover:w-full dark:bg-red-700"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-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="M15 10l4-4m0 0l-4-4m4 4H9m11 7v3a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h3"></path>
          </svg>
          Live Demo
        </span>
      </button>

      <!-- Interactive Button 3: Download Assets -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-orange-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-orange-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute inset-0 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out origin-left bg-orange-600 dark:bg-orange-700"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
          </svg>
          Download Assets
        </span>
      </button>

      <!-- Interactive Button 4: GitHub Repo -->
      <button class="group relative flex items-center justify-center overflow-hidden rounded-lg bg-violet-500 py-3 px-6 font-semibold text-white transition-all duration-300 ease-out hover:scale-105 active:scale-95 dark:bg-violet-600 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="absolute inset-0 bg-violet-600 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:bg-violet-700"></span>
        <span class="relative z-10 flex items-center">
          <svg class="mr-2 h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.417 2.868 8.129 6.837 9.488.499.091.682-.217.682-.483 0-.237-.008-.865-.013-1.698-2.782.603-3.37-1.341-3.37-1.341-.454-1.151-1.107-1.458-1.107-1.458-.907-.61.069-.598.069-.598 1.002.071 1.531 1.028 1.531 1.028.891 1.529 2.341 1.089 2.91.831.091-.645.35-1.088.636-1.338-2.22-.253-4.555-1.111-4.555-4.962 0-1.096.391-1.996 1.029-2.701-.103-.255-.447-1.272.098-2.651 0 0 .84-.271 2.75 1.029A9.563 9.563 0 0110 4.908c.85.004 1.701.114 2.502.327 1.909-1.298 2.747-1.029 2.747-1.029.546 1.379.202 2.396.099 2.651.64.705 1.028 1.605 1.028 2.701 0 3.864-2.339 4.707-4.568 4.953.359.309.678.918.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.577.688.481C17.135 18.118 20 14.406 20 10.017A9.994 9.994 0 0010 0z" clip-rule="evenodd"></path>
          </svg>
          GitHub Repo
        </span>
      </button>

    </div>

    <div class="text-center mt-8">
      <p class="text-slate-600 dark:text-slate-400 text-sm">
        Explore more projects by <a href="#" class="font-medium text-lime-700 hover:underline dark:text-lime-300">[Your Name]</a>
      </p>
    </div>
  </div>
</div>

Carte de tableau de bord triadique de conception matérielle

Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.

Ouvrir Aperçu

                <div class="p-4 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Metric Card 1 (Red/Pinkish) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-red-500 dark:bg-red-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-red-200 dark:border-red-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L19.5 7.5M9.75 17V10" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.5A.5.5 0 1013.5 15.5A.5.5 0 0013.5 16.5M17.5 12.5A.5.5 0 1017.5 11.5A.5.5 0 0017.5 12.5" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Total Sales</h3>
        <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 text-center mb-4">$12,345</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+5% from last month</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-red-600 dark:text-red-400 font-medium hover:underline text-sm">View Details</a>
      </div>
      <div class="absolute inset-0 bg-red-100 dark:bg-red-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 2 (Blue/Cyan) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-blue-500 dark:bg-blue-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-blue-200 dark:border-blue-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.892A13.914 13.914 0 0112 16c2.582 0 5.121.75 7.029 2.019M12 15a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">New Users</h3>
        <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 text-center mb-4">789</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+15% week over week</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-blue-600 dark:text-blue-400 font-medium hover:underline text-sm">User Analytics</a>
      </div>
      <div class="absolute inset-0 bg-blue-100 dark:bg-blue-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 3 (Green/Lime) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-green-500 dark:bg-green-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-green-200 dark:border-green-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18A9 9 0 0112 3z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Bounce Rate</h3>
        <p class="text-4xl font-extrabold text-green-600 dark:text-green-400 text-center mb-4">3.7<span class="text-xl">%</span></p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">-0.5% from previous period</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-green-600 dark:text-green-400 font-medium hover:underline text-sm">View Report</a>
      </div>
      <div class="absolute inset-0 bg-green-100 dark:bg-green-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

  </div>
</div>

Composant de menu déroulant

Un menu déroulant simple et réactif avec un design 3D aux tons de terre, adapté aux blogs ou aux sites de contenu. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left font-sans">
  <button id="dropdownButton" class="inline-flex justify-center w-full rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 transform transition-all duration-300 ease-in-out
    bg-emerald-700 text-amber-50 shadow-lg
    dark:bg-stone-800 dark:text-stone-100
    hover:scale-105 hover:shadow-xl
    focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-emerald-100
    dark:focus:ring-stone-600 dark:focus:ring-offset-stone-900
    active:scale-95 active:shadow-md
    border-b-4 border-r-4 border-emerald-900 dark:border-stone-900
    hover:border-b-emerald-800 hover:border-r-emerald-800
    dark:hover:border-b-stone-700 dark:hover:border-r-stone-700
    ">
    Options
    <svg class="-mr-1 ml-2 h-5 w-5" 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>

  <!-- Dropdown panel, show/hide based on button click. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-y-0 opacity-0 transition-all duration-300 ease-in-out
    bg-amber-100
    dark:bg-stone-700
    border-b-4 border-r-4 border-amber-300 dark:border-stone-800
    " role="menu" aria-orientation="vertical" aria-labelledby="dropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm
          text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
          dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
          border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
          transition-all duration-200 ease-in-out
          " role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    function toggleDropdown() {
      if (dropdownMenu.classList.contains('scale-y-0')) {
        dropdownMenu.classList.remove('scale-y-0', 'opacity-0');
        dropdownMenu.classList.add('scale-y-100', 'opacity-100');
      } else {
        dropdownMenu.classList.remove('scale-y-100', 'opacity-100');
        dropdownMenu.classList.add('scale-y-0', 'opacity-0');
      }
    }

    dropdownButton.addEventListener('click', toggleDropdown);

    // Close the dropdown if the user clicks outside of it
    document.addEventListener('click', (event) => {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        if (dropdownMenu.classList.contains('scale-y-100')) {
          toggleDropdown();
        }
      }
    });

    // Optional: Close on Escape key
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && dropdownMenu.classList.contains('scale-y-100')) {
        toggleDropdown();
      }
    });
  });
</script>

Fiche produit e-commerce avec micro-interactions

Une simple carte de produit e-commerce avec une palette de couleurs triadique et des éléments de micro-interaction pour l’ajouter au panier et l’aimer, avec une réactivité et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
    <div class="relative group">
      <img class="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/300?random=1" alt="Product Image">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
        <button class="flex-1 bg-yellow-500 text-gray-900 py-2 rounded-md font-semibold text-sm opacity-0 group-hover:opacity-100 group-hover:translate-y-0 translate-y-2 transition-all duration-300 hover:bg-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-75">
          Quick View
        </button>
      </div>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">Stylish Summer Dress</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Women's Apparel</p>
      <div class="flex items-center justify-between mt-3 mb-4">
        <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$49.99</span>
        <div class="flex space-x-2">
          <button class="p-2 rounded-full text-gray-400 hover:text-red-500 hover:bg-red-100 dark:hover:bg-red-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 group">
            <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
          </button>
          <button class="p-2 rounded-full text-gray-400 hover:text-blue-500 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 group">
            <svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 11h-4V7a1 1 0 00-2 0v4H7a1 1 0 000 2h4v4a1 1 0 002 0v-4h4a1 1 0 000-2z"/></svg>
          </button>
        </div>
      </div>
      <button class="w-full bg-blue-600 text-white py-2 rounded-md font-semibold text-sm transition-all duration-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transform hover:scale-105 active:scale-95">
        Add to Cart
      </button>
    </div>
  </div>
</div>

1 ... 25 26 27 28 29 ... 242

Catégories

Tous les composants