Search Components

Functional Components

Components that provide specific website functionality

Healthcare Functional Component

A responsive and thematic component for healthcare applications, featuring industrial design, muted colors, and dark mode support. Displays patient/sensor data with quick actions.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden flex items-start justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden md:flex md:space-x-6 p-4 sm:p-6">
    
    <!-- Left Panel: Profile/Main Info -->
    <div class="flex-shrink-0 w-full md:w-1/3 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 pb-4 md:pb-0 md:pr-6 mb-4 md:mb-0">
      <div class="flex items-center space-x-4 mb-6">
        <img class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/86.jpg" alt="Patient Avatar">
        <div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">Patient ID: #HM-7890</p>
        </div>
      </div>
      
      <div class="space-y-3">
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          <span>DOB: 1975-04-12</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Location: Ward 3, Room 101</span>
        </div>
        <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
          <svg class="w-4 h-4 mr-2 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.25m11.28-2.684a1 1 0 00-.948-.684H16a2 2 0 00-2 2v10a2 2 0 002 2h2.28a1 1 0 00.948-.684L22 10.75m-9.28 9.25l-.948 2.36a1 1 0 00.948 1.36h3.28c.188 0 .337-.156.242-.317l-1.442-2.894M5 10.75h2m-2 2h2"></path></svg>
          <span>Assigned Doctor: Dr. Elizabeth Grey</span>
        </div>
      </div>
      
      <button class="mt-6 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md text-sm transition duration-150 ease-in-out
                     focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                     dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
        View Full Record
      </button>
    </div>

    <!-- Right Panel: Data and Actions -->
    <div class="flex-1">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <!-- Sensor Data Card 1 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Heart Rate</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">72 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">bpm</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Stable</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 5 min</span>
        </div>

        <!-- Sensor Data Card 2 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Blood Pressure</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">120/80 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">mmHg</span></p>
          <p class="text-xs text-green-600 dark:text-green-400">Normal</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 1 hr</span>
        </div>

        <!-- Sensor Data Card 3 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Temperature</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">98.6 <span class="text-lg font-normal text-gray-600 dark:text-gray-300">°F</span></p>
          <p class="text-xs text-orange-600 dark:text-orange-400">Steady</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 30 min</span>
        </div>

        <!-- Sensor Data Card 4 -->
        <div class="relative bg-gray-50 dark:bg-gray-700 p-4 rounded-lg border border-gray-200 dark:border-gray-600 shadow-sm">
          <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-2">Oxygen Saturation</h3>
          <p class="text-3xl font-bold text-gray-900 dark:text-gray-50 mb-1">97% <span class="text-lg font-normal text-gray-600 dark:text-gray-300">SpO2</span></p>
          <p class="text-xs text-red-600 dark:text-red-400">Slight dip</p>
          <span class="absolute top-3 right-3 text-gray-400 dark:text-gray-500 text-xs">Last 10 min</span>
        </div>
      </div>

      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Quick Actions</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
        <button class="flex flex-col items-center justify-center p-3 sm:p-4 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 dark:focus:ring-gray-500">
          <svg class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2m-2 0V3m2 2V3m-1 4h.01M16 11l-3-3m0 0l-3 3m3-3v8m0-13h2c.792 0 1.543.344 2.05 1.096L20.2 6.75a1.802 1.802 0 010 2.5L14 15.5m0-10.75v10m-3-10l-2 2-2-2

Real Estate Property Listing Card

A complex, paper/print-inspired real estate property listing card with corporate blue tones, designed for property listing platforms. It features responsive layout, dark mode support, and multiple details about a property.

Open Preview

                <div class="font-sans antialiased bg-blue-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="max-w-6xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex flex-col xl:flex-row relative z-10 animate-fade-in-up">
    
    <!-- Paper Texture Overlay (Non-interactive, for aesthetic) -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-20 dark:opacity-10 pointer-events-none z-0"></div>

    <!-- Property Image Section -->
    <div class="md:flex-shrink-0 md:w-1/2 xl:w-2/5 p-4 sm:p-5 md:p-6 lg:p-8 relative flex items-center justify-center z-10">
      <div class="relative w-full h-64 sm:h-72 md:h-80 xl:h-full max-h-[600px] rounded-lg overflow-hidden shadow-lg border border-blue-100 dark:border-blue-900">
        <img src="https://picsum.photos/id/1050/800/600" alt="Luxury Modern Home Exterior" class="w-full h-full object-cover object-center transform transition-transform duration-500 hover:scale-105">
        <div class="absolute top-4 left-4 bg-blue-600 text-white text-xs sm:text-sm px-3 py-1 rounded-full font-semibold shadow-md">FOR SALE</div>
        <div class="absolute bottom-4 right-4 bg-white/90 dark:bg-gray-700/90 text-blue-800 dark:text-blue-200 text-sm sm:text-base px-3 py-1 rounded-full font-bold shadow-md ring-1 ring-blue-200 dark:ring-blue-700">$1,250,000</div>
        <button class="absolute top-4 right-4 bg-white/90 dark:bg-gray-700/90 text-blue-600 dark:text-blue-400 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white text-sm flex justify-between">
          <span>Photos (18)</span>
          <span>Video Tour</span>
        </div>
      </div>
    </div>

    <!-- Property Details Section -->
    <div class="p-4 sm:p-5 md:p-6 lg:p-8 md:flex-grow xl:w-3/5 flex flex-col justify-between z-10">
      <div>
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-2 leading-tight">
          <a href="#" class="hover:underline">Elegant Family Residence</a>
        </h2>
        <p class="text-blue-700 dark:text-blue-300 text-base sm:text-lg mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          123 Harmony Lane, Metropolis City, NY
        </p>
        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
          Discover the perfect blend of luxury and comfort in this stunning new-build home. Boasting an open-concept design, premium finishes, and a sprawling backyard, it's an entertainer's dream. Located in a top-rated school district with easy access to urban amenities.
        </p>

        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6 text-blue-800 dark:text-blue-200">
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.805a1 1 0 01-1.395 0c-.604-.621-1.258-1.28-1.944-1.895A10.027 10.027 0 0110 15c-1.574 0-3.1-.383-4.402-1.155-.686.615-1.339 1.274-1.943 1.895a1 1 0 01-1.395 0 1 1 0 010-1.395c.966-.996 2.015-2.046 3.146-3.047A7.004 7 0 003 10a7 7 0 0014 0 7.004 7 0 00-3.602-5.442c-1.13.996-2.18 2.046-3.146 3.047a1 1 0 010 1.395z"></path></svg>
            5 Beds
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-3V5a1 1 0 00-1-1H8zm1 3H8v1h4V7h-1v1zM6 9v1h8V9H6zm0 2h8v1H6zm0 2h8v1H6zm0 2h8v1H6z" clip-rule="evenodd"></path></svg>
            3 Baths
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8.4l2 3a1 1 0 010 1.2l-2 3a1 1 0 01-.8.4H6a3 3 0 01-3-3V6zm4-1a1 1 0 00-1 1v4a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H7z" clip-rule="evenodd"></path></svg>
            3,200 sqft
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
            Built 2022
          </div>
        </div>

        <!-- Additional Details Tabs/Sections -->
        <div class="border-t border-b border-blue-100 dark:border-blue-700 py-4 mb-6">
          <div class="flex space-x-4 overflow-x-auto pb-2 scrollbar-hide">
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100 shadow hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors duration-200">Overview</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Features</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Neighborhood</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Mortgage</button>
          </div>
        </div>

        <div class="text-gray-700 dark:text-gray-300 text-sm mb-6 flex flex-wrap gap-2 sm:gap-4">
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Central Air</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Hardwood Floors</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Two-Car Garage</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Smart Home Tech</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Spacious Yard</span>
        </div>

      </div>

      <!-- Agent Contact & Action Buttons -->
      <div class="flex flex-col sm:flex-row sm:items-center justify-between pt-4 border-t border-blue-100 dark:border-blue-700 mt-auto">
        <div class="flex items-center mb-4 sm:mb-0">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-400 dark:border-blue-600 shadow-md">
          <div>
            <p class="text-gray-800 dark:text-blue-100 font-semibold text-sm sm:text-base">John Doe</p>
            <p class="text-blue-600 dark:text-blue-300 text-xs sm:text-sm">Leading Agent</p>
          </div>
        </div>
        <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
          <button class="flex-grow sm:flex-grow-0 px-5 py-2.5 rounded-full bg-blue-700 text-white font-semibold text-sm sm:text-base hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 shadow-lg transform active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
            Call Agent
          </button>
          <button class="flex-grow sm:flex-grow-0 px-5 py-2.5 rounded-full border border-blue-700 dark:border-blue-500 text-blue-700 dark:text-blue-400 font-semibold text-sm sm:text-base hover:bg-blue-50 dark:hover:bg-blue-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
            Email Agent
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for better aesthetics, especially in dark mode */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Animation for the card */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }
</style>

Art Deco Purple Documentation Component

A moderate complexity documentation/wiki component with an Art Deco design theme, featuring geometric patterns and luxurious styling using a purple/violet color spectrum. Fully responsive with dark mode support.

Open Preview

                <div class="font-sans bg-gradient-to-br from-purple-100 to-indigo-100 min-h-screen p-4 dark:from-gray-900 dark:to-black md:p-8">

  <!-- Component Wrapper -->
  <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-2xl overflow-hidden dark:bg-zinc-800 transform transition-all duration-500 hover:scale-[1.005] hover:shadow-3xl border-t-4 border-l-4 border-purple-600 dark:border-purple-800">

    <!-- Header Section -->
    <div class="relative p-6 md:p-10 bg-purple-800 text-white dark:bg-purple-950 overflow-hidden before:absolute before:inset-0 before:bg-gradient-to-br before:from-purple-700 before:to-fuchsia-600 before:opacity-30 dark:before:from-purple-900 dark:before:to-fuchsia-900 before:blur-sm">
      <div class="relative z-10 flex flex-col md:flex-row justify-between items-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white drop-shadow-lg font-serif mb-4 md:mb-0">
          <span class="block">Documentation</span>
          <span class="block text-purple-200 text-2xl md:text-3xl lg:text-4xl mt-2 font-light">Art Deco Archives</span>
        </h1>
        <div class="flex space-x-4">
          <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
            <svg class="w-5 h-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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
            New Page
          </button>
          <button class="px-6 py-3 bg-fuchsia-500 hover:bg-fuchsia-600 text-white rounded-full text-lg font-semibold transition duration-300 transform hover:scale-105 shadow-md flex items-center">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2400/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>
            Search
          </button>
        </div>
      </div>
      
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 bg-repeat bg-center opacity-10" style="background-image: url('data:image/svg+xml

Paper/Print-inspired Booking Card

A simple, responsive booking/reservation card component with a paper/print-inspired design and earth-tone color scheme, featuring dark mode support. Suitable for displaying appointment slots or reservation details.

Open Preview

                <div class="p-4 bg-stone-100 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">

  <div class="max-w-sm mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 md:max-w-md lg:max-w-lg border border-stone-200 dark:border-stone-700 hover:shadow-lg dark:hover:shadow-stone-700/50">
    
    <!-- Paper-like Header -->
    <div class="relative bg-gradient-to-r from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-700/80 p-4 border-b-2 border-stone-300 dark:border-stone-700/80 text-stone-800 dark:text-stone-100 print:text-black">
      <div class="absolute inset-0 bg-paper-texture opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h3 class="text-xl font-serif tracking-wide">Appointment Slot</h3>
      <p class="text-sm text-stone-600 dark:text-stone-300 italic">Book your session now</p>
    </div>

    <!-- Content Area resembling printed text -->
    <div class="p-6 space-y-4 text-stone-700 dark:text-stone-300">
      
      <!-- Appointment Details -->
      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Wednesday, October 26, 2024</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Available All Day</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">10:00 AM - 11:00 AM</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 hour session</p>
        </div>
      </div>

      <div class="flex items-center space-x-3">
        <svg class="w-6 h-6 flex-shrink-0 text-stone-600 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <div>
          <p class="text-lg font-medium">Virtual Meeting (Zoom)</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Link will be sent after booking</p>
        </div>
      </div>

      <!-- Provider/Context Info (optional) -->
      <div class="pt-4 border-t border-dashed border-stone-300 dark:border-stone-600 flex items-center space-x-4">
        <img class="w-12 h-12 rounded-full object-cover border-2 border-stone-300 dark:border-stone-500" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Alice Johnson">
        <div>
          <p class="text-base font-semibold">With Dr. Alice Johnson</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">Consultation Specialist</p>
        </div>
      </div>

    </div>

    <!-- Actions resembling perforation or torn paper edge -->
    <div class="p-6 flex justify-end bg-stone-50 dark:bg-stone-900 border-t border-stone-200 dark:border-stone-700">
      <button class="px-6 py-2 bg-emerald-700 text-white rounded-md hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-colors duration-200 shadow-sm text-sm font-medium tracking-wide dark:hover:bg-emerald-600">
        Book Now
      </button>
    </div>

  </div>
</div>

Glassmorphic Music Player Controls

A glassmorphic music player control component with sepia/brown tones, featuring frosted glass-like translucent elements and blur effects. It's responsive, supports dark mode, and is suitable for music streaming and audio platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-amber-100 to-amber-300 dark:from-stone-900 dark:to-stone-700 font-sans">
  <div class="w-full max-w-md p-6 rounded-3xl backdrop-filter backdrop-blur-xl bg-white/20 dark:bg-stone-800/30 border border-t-white/30 border-l-white/30 border-b-white/10 border-r-white/10 dark:border-t-stone-700/30 dark:border-l-stone-700/30 dark:border-b-stone-900/40 dark:border-r-stone-900/40 shadow-xl overflow-hidden transition-all duration-300 ease-in-out sm:p-8">
    <div class="flex items-center space-x-4 mb-6">
      <img src="https://picsum.photos/seed/music_album/100/100" alt="Album Art" class="w-20 h-20 rounded-xl shadow-lg ring-2 ring-white/30 dark:ring-stone-600/50 object-cover">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-stone-900 dark:text-stone-100 mb-1 leading-tight sm:text-2xl">Lost in the Echoes</h3>
        <p class="text-sm text-stone-700 dark:text-stone-300 sm:text-base">The Echoes of Light</p>
      </div>
    </div>

    <div class="w-full bg-stone-300/50 dark:bg-stone-700/50 rounded-full h-2 mb-4 relative overflow-hidden">
      <div class="bg-amber-700 dark:bg-amber-500 h-full rounded-full" style="width: 65%;"></div>
      <div class="w-3 h-3 rounded-full bg-stone-900 dark:bg-stone-50 absolute top-1/2 -translate-y-1/2" style="left: 65%; transform: translateX(-50%) translateY(-50%);"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-700 dark:text-stone-300 mb-6">
      <span>2:45</span>
      <span>-1:15</span>
    </div>

    <div class="flex items-center justify-around space-x-6 mb-6">
      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M20.25 12a.75.75 0 01-.75.75H6.31l5.47 5.47a.75.75 0 11-1.06 1.06l-6.75-6.75a.75.75 0 010-1.06l6.75-6.75a.75.75 0 111.06 1.06l-5.47 5.47H19.5a.75.75 0 01.75.75z" clip-rule="evenodd" />
        </svg>
      </button>

      <button class="flex items-center justify-center w-16 h-16 rounded-full backdrop-filter backdrop-blur-md bg-amber-600/70 dark:bg-amber-700 text-white shadow-lg transition-all duration-200 ease-in-out hover:scale-105 hover:bg-amber-700/80 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-stone-800/40">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M6.75 5.25a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75H7.5a.75.75 0 01-.75-.75V5.25zm7.5 0a.75.75 0 01.75-.75H16.5a.75.75 0 01.75.75v13.5a.75.75 0 01-.75.75h-1.5a.75.75 0 01-.75-.75V5.25z" clip-rule="evenodd" />
        </svg>
         <!-- Play icon (uncomment to show instead of pause) -->
        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8">
          <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.38 2.724-1.638L18.897 12l-11.673 7.985c-1.196.812-2.724-.136-2.724-1.638V5.653z" clip-rule="evenodd" />
        </svg> -->
      </button>

      <button class="flex items-center justify-center w-12 h-12 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-md transition-all duration-200 ease-in-out hover:scale-105 hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
          <path fill-rule="evenodd" d="M3.75 12a.75.75 0 01.75-.75h13.19l-5.47-5.47a.75.75 0 011.06-1.06l6.75 6.75a.75.75 0 010 1.06l-6.75 6.75a.75.75 0 11-1.06-1.06l5.47-5.47H4.5a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="flex items-center justify-between mt-8 pt-4 border-t border-t-white/30 dark:border-t-stone-700/30">
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M18 5.25a2.25 2.25 0 00-2.25-2.25H13.5V6a.75.75 0 01-.75.75H10.5a.75.75 0 01-.75-.75V3H6.75A2.25 2.25 0 004.5 5.25v9.75A2.25 2.25 0 006.75 17.25h11.25A2.25 2.25 0 0020.25 15V5.25z" />
          <path fill-rule="evenodd" d="M5.841 20.352a.75.75 0 01.11.919l-1.396 2.41a.75.75 0 01-1.072.247 5.25 5.25 0 01-2.73-4.226c-.705-2.365 1.01-4.784 3.003-5.264a.75.75 0 01.378.143l1.395 2.41a.75.75 0 01-.069.813 2.998 2.998 0 00-1.029 2.012 2.998 2.998 0 002.585 2.934c.333.035.653.073.955.11z" clip-rule="evenodd" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M13.5 4.5a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM12 18.75h9v-1.5h-9v1.5zM12 13.5h9v-1.5h-9v1.5zM12 8.25h9V6.75h-9v1.5z" />
          <path d="M9 12a2.25 2.25 0 00-2.25 2.25V17.5L7.5 18H5.25A2.25 2.25 0 013 15.75v-1.5A2.25 2.25 0 015.25 12H9z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path fill-rule="evenodd" d="M9.401 3.003L9.401 3.003c.88-1.523 2.65-1.926 4.172-1.045l1.474.851a9.966 9.966 0 013.255.474c1.196.356 2.052 1.517 1.906 2.709a1.597 1.597 0 00.26 1.056c.408.54.912 1.037 1.463 1.49l1.4.966c1.1.758 1.45 2.201.838 3.419C20.334 16.146 17.518 19 12 19c-3.149 0-5.91-.904-8.082-2.397-1.121-.795-1.874-2.234-1.637-3.666 4.792-.783 7.039-4.717 7.039-4.717z" clip-rule="evenodd" />
          <path d="M11.94 9.141a.75.75 0 10-1.39-.72l.432.842 1.39-.72-.432-.843z" />
        </svg>
      </button>
      <button class="flex items-center justify-center w-10 h-10 rounded-full backdrop-filter backdrop-blur-sm bg-white/30 dark:bg-stone-700/50 text-stone-800 dark:text-stone-200 shadow-sm transition-all text-sm hover:bg-white/50 dark:hover:bg-stone-600/70 focus:outline-none focus:ring-2 focus:ring-amber-600/50 focus:ring-offset-2 focus:ring-offset-white/20 dark:focus:ring-offset-stone-800/30">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
          <path d="M19.006 3.705a.75.75 0 00-.512-1.113L4.625 1.25A4.5 4.5 0 002.25 5.5V16.5a3 3 0 003 3h.75v3.375c0 .621.504 1.125 1.125 1.125h2.25a.75.75 0 00.75-.75v-3.75H12a.75.75 0 00.75-.75V14.25h.375c2.213 0 4.309-.655 6.004-1.764a.75.75 0 00.186-.135l3.42-3.037a.75.75 0 00.112-.868V4.5a.75.75 0 00-.91-.795zM16.793 9.782l-3.674 3.261a1.5 1.5 0 01-.587.232l-.23.03A.75.75 0 0012 13.5H9.75V5.5c0-.103.003-.205.009-.306C9.916 4.965 10.12 4.5 10.5 4.5h3C4.625 1.25 15.375 1.25 18.04 2.802a.75.75 0 00.41-.013c.962-.438 2.407-.942 3.605-1.124A.75.75 0 0022.5 1.5h.023a.75.75 0 00.046-1.498 7.502 7.502 0 00-6.191 1.026v1.312c0 2.226-1.501 4.25-3.765 4.25h-.548A9.75 9.75 0 014.5 8.25V5.5c0-.853.64-1.564 1.47-.788l11.751 2.35L19.006 3.705z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Microinteractions_Triadic_Dashboard_Component

A responsive dashboard component with triadic color scheme, incorporating microinteractions for user engagement. Features data visualization elements and controls, with full dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <div class="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100">Dashboard Overview</h1>
    <div class="flex items-center space-x-4">
      <button class="flex items-center space-x-2 px-4 py-2 bg-purple-600 text-white rounded-lg shadow-lg hover:bg-purple-700 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span class="text-sm font-medium">Add Widget</span>
      </button>
      <button class="p-2 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 active:scale-95 transition-all duration-200 shadow-md focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50">
        <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>
      </button>
      <img class="w-9 h-9 rounded-full border-2 border-yellow-500 transform hover:scale-105 active:scale-90 transition duration-200 cursor-pointer" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
    </div>
  </div>

  <!-- Main Grid Area -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-max">

    <!-- Metric Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Total Sales</h3>
        <svg class="w-6 h-6 text-purple-500 group-hover:text-purple-600 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M18 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-9-9a2 2 0 100-4 2 2 0 000 4zm0 2a2 2 0 100 4 2 2 0 000-4zm0 4a2 2 0 100 4 2 2 0 000-4z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-purple-700 dark:group-hover:text-purple-400 transition-colors duration-200">$12,345</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">+5.2% from last month
        <span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
          <svg class="w-4 h-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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </span>
      </p>
    </div>

    <!-- Metric Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">New Users</h3>
        <svg class="w-6 h-6 text-yellow-500 group-hover:text-yellow-600 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.653-.134-1.282-.387-1.857M12 11a4 4 0 110-8 4 4 0 010 8zm0 1c1.332 0 2.502.593 3.327 1.488L15 15h2l-2 4h-1l-2 4h-2l-2 4H6l-2-4H3l-2-4h2l2-4h2l3-3.003L12 12z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-yellow-700 dark:group-hover:text-yellow-400 transition-colors duration-200">789</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">+12% from last week
        <span class="inline-block ml-1 text-green-500 group-hover:animate-bounce-faded">
           <svg class="w-4 h-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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </span>
      </p>
    </div>

    <!-- Metric Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 flex flex-col justify-between transform hover:scale-103 transition-all duration-300 group overflow-hidden border border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-start mb-4">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Active Projects</h3>
        <svg class="w-6 h-6 text-green-500 group-hover:text-green-600 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <p class="text-4xl font-bold text-gray-900 dark:text-gray-50 mb-2 group-hover:text-green-700 dark:group-hover:text-green-400 transition-colors duration-200">23</p>
      <p class="text-sm text-gray-500 dark:text-gray-400">All on track
        <span class="inline-block ml-1 text-blue-500 group-hover:animate-ping-once">
           <svg class="w-4 h-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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </span>
      </p>
    </div>

    <!-- Activity Feed -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
      <ul class="space-y-4">
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-100">
          <img class="w-9 h-9 rounded-full border-2 border-purple-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-purple-600 dark:text-purple-400">Jane Doe</span> updated a project <span class="text-yellow-600 dark:text-yellow-400 font-medium hover:underline cursor-pointer">'Website Redesign'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
          <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-purple-600 dark:hover:text-purple-400 transitino-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-200">
          <img class="w-9 h-9 rounded-full border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-yellow-600 dark:text-yellow-400">John Smith</span> commented on task <span class="text-green-600 dark:text-green-400 font-medium hover:underline cursor-pointer">'Implement API'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
           <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-yellow-600 dark:hover:text-yellow-400 transitino-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
        <li class="flex items-center space-x-3 group animate-appear-from-left animation-delay-300">
          <img class="w-9 h-9 rounded-full border-2 border-green-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100"><span class="font-medium text-green-600 dark:text-green-400">Alice Green</span> completed task <span class="text-purple-600 dark:text-purple-400 font-medium hover:underline cursor-pointer">'Design mockups'</span>.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
           <button class="p-1 rounded-full text-gray-400 dark:text-gray-500 invisible group-hover:visible hover:text-green-600 dark:hover:text-green-400 transitino-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
        </li>
      </ul>
    </div>

    <!-- Quick Actions -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Quick Actions</h3>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:rotate-6 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
          <span class="text-sm font-medium">Generate Report</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:animate-wiggle" 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 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v11a2 2 0 002 2h10a2 2 0 002-2v-3"></path></svg>
          <span class="text-sm font-medium">New Document</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:animate-pulse-slow" 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-sm font-medium">Edit Profile</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-lg shadow-md hover:shadow-lg hover:translate-y-[-2px] active:translate-y-[0px] transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          <svg class="w-8 h-8 mb-2 group-hover:scale-110 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span class="text-sm font-medium">Send Message</span>
        </button>
      </div>
    </div>

    <!-- Image Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform hover:scale-103 transition-all duration-300 relative group">
      <img class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300" src="https://picsum.photos/600/400?random=1" alt="Placeholder Image">
      <div class="p-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Project Progress</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400">Visual representation of current project milestones and achievements.</p>
      </div>
      <button class="absolute bottom-4 right-4 p-2 bg-purple-500 text-white rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-50">
        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
      </button>
    </div>

    <!-- Calendar/Schedule Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 border border-gray-200 dark:border-gray-700 lg:col-span-2">
      <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Upcoming Schedule</h3>
      <div class="space-y-4">
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-purple-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>10<br><span class="text-xs font-normal">AM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Team Sync Meeting</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Project Alpha, Video Call</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-purple-600 dark:hover:text-purple-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
          </button>
        </div>
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-yellow-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>02<br><span class="text-xs font-normal">PM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Client Review Session</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Client XYZ, Office Mtg Room</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-yellow-600 dark:hover:text-yellow-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </button>
        </div>
        <div class="flex items-start space-x-4 p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200 group">
          <div class="flex-none w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center text-sm font-bold group-hover:scale-110 transition-transform duration-200">
            <p>04<br><span class="text-xs font-normal">PM</span></p>
          </div>
          <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-100 font-medium">Code Review: Feature X</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Development Team</p>
          </div>
          <button class="flex-none text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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>
          </button>
        </div>
      </div>
    </div>

  </div>

  <!-- Tailwind JIT custom animations (add to tailwind.config.js) -->
  <style>
    @keyframes bounce-faded {
      0%, 100% { transform: translateY(0); opacity: 1; }
      50% { transform: translateY(-5px); opacity: 0.8; }
    }
    .animate-bounce-faded {
      animation: bounce-faded 0.8s ease-in-out infinite;
    }

    @keyframes ping-once {
      75%, 100% { transform: scale(2); opacity: 0; }
    }
    .animate-ping-once {
      animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1);
    }

    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(3deg); }
      50% { transform: rotate(-3deg); }
      75% { transform: rotate(2deg); }
    }
    .animate-wiggle {
      animation: wiggle 0.4s ease-in-out infinite;
    }

    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: .5; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes appear-from-left {
        0% { opacity: 0; transform: translateX(-20px); }
        100% { opacity: 1; transform: translateX(0); }
    }
    .animate-appear-from-left {
        animation: appear-from-left 0.5s ease-out forwards;
    }

    .animation-delay-100 { animation-delay: 0.1s; }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-300 { animation-delay: 0.3s; }
  </style>

</div>

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>