Rechercher des composants

Catégories

Composants Composants fonctionnels

Composants fonctionnels

Composants qui fournissent des fonctionnalités spécifiques au site Web

Composante fonctionnelle des soins de santé

Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.

Ouvrir Aperçu

                <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

Carte d’inscription immobilière

Une carte d’annonce immobilière complexe, inspirée du papier/de l’impression avec des tons bleus d’entreprise, conçue pour les plateformes d’annonces immobilières. Il propose une mise en page réactive, une prise en charge du mode sombre et de multiples détails sur une propriété.

Ouvrir Aperçu

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

Composant de documentation Art Déco Violet

Il s’agit d’un composant de documentation/wiki de complexité modérée avec un thème de design Art déco, avec des motifs géométriques et un style luxueux utilisant un spectre de couleurs violet/violet. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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

Carte de réservation inspirée du papier/de l’impression

Un composant de carte de réservation/réservation simple et réactif avec un design inspiré du papier/de l’impression et une palette de couleurs terre, avec prise en charge du mode sombre. Convient pour afficher les créneaux de rendez-vous ou les détails de la réservation.

Ouvrir Aperçu

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

Commandes du lecteur de musique Glassmorphic

Un composant de contrôle de lecteur de musique glassmorphic avec des tons sépia/brun, avec des éléments translucides givrés ressemblant à du verre et des effets de flou. Il est réactif, prend en charge le mode sombre et convient au streaming musical et aux plateformes audio.

Ouvrir Aperçu

                <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

Un composant de tableau de bord réactif avec une palette de couleurs triadiques, intégrant des micro-interactions pour l’engagement de l’utilisateur. Comprend des éléments et des commandes de visualisation de données, avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

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

Fiche produit e-commerce avec micro-interactions

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

Ouvrir Aperçu

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