Search Components

All Components

Browse all available Tailwind CSS components

Skeuomorphic_Monochromatic_Auth_E-commerce

A complex, skeuomorphic, and monochromatic authentication component for e-commerce applications, featuring multiple interactive elements and responsive design with dark mode support. It mimics real-world interfaces with digital controls.

Open Preview

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

A complex, triadic-colored glassmorphism dashboard layout component with a sidebar, main content area, and multiple translucent panels, fully responsive and with dark mode support. Designed for data visualization and control panels.

Open Preview

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

Product Reviews Component

A simple, responsive product reviews component suitable for a blog or content site, designed with Material Design principles. It features a triadic color scheme and dark mode support.

Open Preview

                <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

A brutalist-inspired infographics component for business/corporate websites, featuring raw typography, high contrast, and earth tones. It is responsive and supports dark mode.

Open Preview

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

Brutalist Monochromatic Activity Feed

A simple, brutalist-inspired activity feed component with a monochromatic color scheme, suitable for business/corporate websites. Features high contrast, bold typography, and full responsiveness with dark mode support.

Open Preview

                <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

A brutalist-style, responsive data table component for e-commerce, featuring high contrast, a complementary color scheme (yellow/purple), and dark mode support. Designed for product listings or order management.

Open Preview

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

Buttons Component

A set of interactive buttons designed for a portfolio, featuring microinteractions, a complementary color scheme, and full responsiveness with dark mode support.

Open Preview

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

Material Design Triadic Dashboard Card

A simple, responsive dashboard content display component with Material Design aesthetics, using a triadic color scheme and dark mode support. Suitable for displaying key metrics or information.

Open Preview

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

Dropdown Menu Component

A simple, responsive dropdown menu with a 3D Earth-tone design, suitable for blog or content sites. Includes dark mode support.

Open Preview

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

E-commerce Product Card with Microinteractions

A simple e-commerce product card with triadic color scheme and microinteraction elements for adding to cart and liking, featuring responsiveness and dark mode support.

Open Preview

                <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 ... 118 119 120 121 122 ... 335

Search Components

Categories

All Components