Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Retro_Healthcare_Activity_Feed

Un composant de flux d’activité dynamique rétro/vintage pour les applications de santé, conçu avec une esthétique des années 80/90, avec des notifications et des mises à jour avec une prise en charge réactive et en mode sombre.

Ouvrir Aperçu

                <div class="font-mono p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-gray-900 dark:to-gray-800 min-h-screen text-gray-800 dark:text-gray-200">

  <!-- Header with Retro Vibe -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white dark:text-pink-400 drop-shadow-lg leading-tight">
      <span class="bg-gradient-to-r from-red-500 to-yellow-400 px-3 py-1 rounded-lg shadow-lg inline-block transform -rotate-2 animate-pulse-slow">RETRO</span> HEALTH ACTIVITY
    </h1>
    <p class="mt-2 text-xl sm:text-2xl font-semibold text-purple-700 dark:text-purple-300 antialiased">Your Healthcare Pulse</p>
  </div>

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 border-4 border-yellow-400 dark:border-pink-500 transform skew-y-1 rotate-1 scale-95 transition-all duration-300 hover:skew-y-0 hover:rotate-0 hover:scale-100 ease-in-out">
    <div class="flex items-center justify-between mb-6 border-b-2 border-dashed border-purple-400 dark:border-pink-600 pb-4">
      <h2 class="text-3xl font-bold uppercase text-blue-600 dark:text-blue-400 tracking-wide">
        Activity Log <span class="text-yellow-500 dark:text-yellow-300 animate-bounce ml-2 text-4xl">★</span>
      </h2>
      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white dark:text-gray-100 font-bold py-2 px-4 rounded-full shadow-lg transform -skew-x-6 hover:skew-x-0 transition-transform duration-200">
        View All
      </button>
    </div>

    <ul class="space-y-6">

      <!-- Activity Item 1 -->
      <li class="flex items-start bg-blue-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-blue-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-blue-400 dark:border-cyan-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T14:30">Oct 26, 2023, 2:30 PM</time></p>
          <p class="text-lg font-bold text-blue-700 dark:text-blue-300 mb-1">Dr. Anya Sharma</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Prescription Added:</span> <span class="font-mono bg-blue-200 dark:bg-gray-600 text-blue-800 dark:text-white px-2 py-1 rounded-md text-sm">Insulin - 10 units daily</span> for diabetes management.</p>
        </div>
        <div class="flex-none text-2xl text-yellow-600 dark:text-yellow-400 ml-4 hidden sm:block">💊</div>
      </li>

      <!-- Activity Item 2 -->
      <li class="flex items-start bg-green-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-green-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-green-400 dark:border-emerald-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T10:15">Oct 26, 2023, 10:15 AM</time></p>
          <p class="text-lg font-bold text-green-700 dark:text-green-300 mb-1">System Update</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Feature:</span> Your latest blood pressure readings have been successfully synchronized from your smart device. <span class="text-green-600 dark:text-green-400 blinking-text">LIVE!</span></p>
        </div>
        <div class="flex-none text-2xl text-lime-600 dark:text-lime-400 ml-4 hidden sm:block">📈</div>
      </li>

      <!-- Activity Item 3 -->
      <li class="flex items-start bg-yellow-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-yellow-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-yellow-400 dark:border-amber-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T16:00">Oct 25, 2023, 4:00 PM</time></p>
          <p class="text-lg font-bold text-yellow-700 dark:text-yellow-300 mb-1">Clinic Notification</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Appointment Reminder:</span> Your upcoming physiotherapy session is scheduled for <span class="font-mono bg-yellow-200 dark:bg-gray-600 text-yellow-800 dark:text-white px-2 py-1 rounded-md text-sm">tomorrow, Oct 27, 9:00 AM</span>.</p>
        </div>
        <div class="flex-none text-2xl text-orange-600 dark:text-orange-400 ml-4 hidden sm:block">📅</div>
      </li>

      <!-- Activity Item 4 -->
      <li class="flex items-start bg-red-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-red-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="System Bot" class="w-12 h-12 rounded-full mr-4 border-4 border-red-400 dark:border-rose-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T09:00">Oct 25, 2023, 9:00 AM</time></p>
          <p class="text-lg font-bold text-red-700 dark:text-red-300 mb-1">Emergency Contact Alert</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Emergency Alert Test:</span> Your emergency contacts have been notified of a system test. No action required. <span class="text-red-600 dark:text-red-400 flashing-text">TEST!</span></p>
        </div>
        <div class="flex-none text-2xl text-red-600 dark:text-red-400 ml-4 hidden sm:block">🚨</div>
      </li>

    </ul>

    <div class="mt-8 text-center">
      <button class="bg-purple-600 hover:bg-purple-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white dark:text-gray-100 font-extrabold py-3 px-8 rounded-lg shadow-lg text-lg transform hover:scale-105 transition-transform duration-200 border-4 border-pink-400 dark:border-yellow-400 animate-pulse">
        LOAD MORE DATA
      </button>
    </div>
  </div>

  <!-- Tailwind JIT custom animations (typically in tailwind.config.js - but included here for single file component) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; transform: scale(1) rotate(-2deg); }
      50% { opacity: 0.8; transform: scale(1.02) rotate(-2deg); }
    }
    .animate-pulse-slow {
      animation: pulse-slow 4s infinite ease-in-out;
    }

    @keyframes blinking-text {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .blinking-text {
      animation: blinking-text 1.5s infinite step-end;
    }

    @keyframes flashing-text {
      0%, 100% { color: #dc2626; /* red-600 */ }
      50% { color: #facc15; /* yellow-400 */ }
    }
    .flashing-text {
      animation: flashing-text 0.8s infinite step-end;
    }

    @keyframes ping-slow {
      0% { transform: scale(0.8); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .animate-ping-slow {
      animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Basic dark mode toggle for demonstration, not part of the component itself but useful for testing */
    .dark-mode-toggle {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        background-color: #6d28d9; /* Deep Purple */
        color: white;
        padding: 0.75rem 1.25rem;
        border-radius: 9999px;
        cursor: pointer;
        font-family: sans-serif;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 1000;
    }
    .dark .dark-mode-toggle {
        background-color: #db2777; /* Deep Pink */
    }
  </style>

  <!-- Simple Dark Mode Toggle (for demonstration) -->
  <button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>

</div>

3D_Earth_Tone_Dating_Social_Navigation

Un composant de navigation réactif pour les plateformes de rencontres/sociales, avec un design inspiré de la 3D avec des tons de terre et la prise en charge du mode sombre. Comprend des éléments interactifs tels qu’un avatar de profil, une recherche et des liens de navigation de base.

Ouvrir Aperçu

                <nav class="bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-xl relative z-40 rounded-b-xl overflow-hidden">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20 items-center">
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-stone-700 dark:text-stone-300 font-bold text-2xl lg:text-3xl tracking-tight relative">
          <span class="block transform -translate-y-1 -translate-x-1 font-extrabold text-stone-500 opacity-20 dark:text-stone-400">LOV3D</span>
          <span class="absolute top-0 left-0 text-amber-700 dark:text-amber-500">LOV3D</span>
        </a>
      </div>

      <div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Matches
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Messages
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
          Discover
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </div>

      <div class="flex items-center space-x-4">
        <div class="relative hidden sm:block">
          <label for="search-input" class="sr-only">Search</label>
          <input
            type="text"
            id="search-input"
            placeholder="Search..."
            class="pl-10 pr-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-50 dark:bg-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 w-36 lg:w-48 transition-all duration-300 ease-in-out shadow-inner dark:shadow-none"
          />
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
          </svg>
        </div>

        <div class="relative group">
          <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-amber-400 dark:focus:ring-offset-stone-800">
            <span class="sr-only">Open user menu</span>
            <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400 shadow-md transform transition-transform duration-300 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
            <span class="absolute -bottom-1 -right-1 block h-3 w-3 rounded-full bg-green-500 border-2 border-stone-100 dark:border-stone-900"></span>
          </button>
          <!-- Dropdown for profile, settings (hidden by default, can be toggled with JS) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white dark:bg-stone-700 ring-1 ring-black ring-opacity-5 focus:outline-none"></div> -->
        </div>

        <!-- Mobile menu button -->
        <div class="-mr-2 flex md:hidden">
          <button type="button" class="bg-amber-600 dark:bg-amber-700 inline-flex items-center justify-center p-2 rounded-md text-stone-100 dark:text-stone-300 transition duration-150 ease-in-out hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <!-- Icon when menu is closed. -->
            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
            <!-- Icon when menu is open. -->
            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden absolute w-full bg-gradient-to-b from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-lg pb-4 pt-2 -mt-1 transform transition-transform duration-300 ease-out scale-y-0 origin-top" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Home</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Matches</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Messages</a>
      <a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Discover</a>
    </div>
    <div class="border-t border-stone-300 dark:border-stone-700 pt-4 pb-3">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-stone-800 dark:text-stone-200">John Doe</div>
          <div class="text-sm font-medium text-stone-500 dark:text-stone-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This is a placeholder for JS-driven interactivity to toggle the mobile menu. */
  /* For dynamic demo, you might add a class like 'mobile-menu-open' to 'nav' and manage its visibility. */
  #mobile-menu {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
  }

  /* Example of how it would look when open with JS */
  /* nav.mobile-menu-open #mobile-menu {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  } */
</style>

Composant de menu de hamburger pour l’alimentation/le restaurant (Memphis pastel)

Un composant de menu de hamburger simple et réactif pour les sites Web de nourriture/restaurant, avec une esthétique Memphis Design avec des couleurs pastel. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-pink-100 dark:bg-sky-950 p-4 shadow-md font-sans">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-orange-500 dark:text-orange-300 text-3xl font-bold tracking-tight transform -rotate-3 hover:scale-105 transition-transform duration-300 ease-in-out">
      <span class="block">YUM!</span>
      <span class="text-blue-400 dark:text-blue-200 text-sm block font-normal mt-0.5">Menu</span>
    </a>

    <!-- Desktop Menu -->
    <div class="hidden md:flex space-x-6 lg:space-x-8 items-center">
      <a href="#home" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Home
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#menu" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Our Menu
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#offers" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Special Offers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#contact" class="text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out relative group">
        Contact
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-orange-500 dark:bg-orange-300 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <button class="px-6 py-2 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-lg font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out">
        Order Now!
      </button>
    </div>

    <!-- Mobile Hamburger Button (visible on small screens) -->
    <div class="md:hidden">
      <button id="mobile-menu-button" class="text-purple-600 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8 transform rotate-6 hover:rotate-0 transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, shown with JS) -->
  <div id="mobile-menu" class="md:hidden hidden bg-pink-50 dark:bg-sky-900 border-t border-purple-200 dark:border-sky-800 mt-4 py-4 rounded-b-lg shadow-inner">
    <div class="flex flex-col items-center space-y-4">
      <a href="#home" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Home
      </a>
      <a href="#menu" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Our Menu
      </a>
      <a href="#offers" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Special Offers
      </a>
      <a href="#contact" class="block text-purple-600 dark:text-purple-200 text-lg font-semibold hover:text-orange-500 dark:hover:text-orange-300 transition duration-200 ease-in-out py-2 px-4 rounded-md w-full text-center hover:bg-purple-100 dark:hover:bg-sky-800">
        Contact
      </a>
      <button class="mt-4 px-8 py-3 rounded-full bg-orange-400 dark:bg-orange-600 text-white dark:text-gray-100 text-xl font-bold shadow-lg transform -skew-x-6 hover:skew-x-0 hover:scale-105 transition-all duration-300 ease-in-out w-4/5">
        Order Now!
      </button>
    </div>
  </div>
</nav>

<!-- JavaScript to toggle the mobile menu -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('mobile-menu-button');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
<\/script>

Aller au composant de lien de contenu

Un composant de lien simple et réactif « Passer au contenu » avec un style aquarelle/artistique, une palette de couleurs triadique et des éléments thématiques agriculture/agriculture, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-green-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans relative">
  <!-- Skip to Content Link -->
  <a href="#main-content" class="
      absolute top-0 left-1/2 -translate-x-1/2 -translate-y-full px-4 py-2 mt-2
      bg-yellow-600 text-white rounded-md shadow-lg
      focus:translate-y-0 focus:z-50
      transition-transform duration-300 ease-out
      text-sm sm:text-base
      dark:bg-yellow-700 dark:text-gray-100
      border-2 border-transparent focus:border-green-800 dark:focus:border-green-300
      font-bold tracking-wide
    ">Skip to Main Content</a>

  <!-- Main content area (example) -->
  <main id="main-content" class="
      bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10
      max-w-4xl w-full text-center
      border-t-8 border-yellow-500 dark:border-yellow-600
      relative overflow-hidden
    ">
    <!-- Artistic element: Subtle green watercolor splash -->
    <div class="
        absolute top-0 left-0 w-full h-full
        bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-green-100/50 to-transparent
        dark:from-green-900/30 dark:to-transparent
        pointer-events-none
        opacity-70 dark:opacity-50
      "></div>
    <h1 class="text-2xl sm:text-3xl md:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Harvesting Growth, Nurturing Nature
    </h1>
    <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg mb-6 sm:mb-8 max-w-2xl mx-auto leading-relaxed">
      Welcome to our agricultural hub. We cultivate innovation and sustainable practices,
      bringing forth the bounty of the earth.
    </p>
    <img src="https://picsum.photos/seed/agriculture/800/450" alt="Agricultural field at sunset" class="rounded-lg shadow-md mb-6 sm:mb-8 w-full h-auto object-cover">
    <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base leading-relaxed">
      Our commitment extends from seed to harvest, ensuring quality and fostering a thriving ecosystem.
      Explore our offerings below.
    </p>
    <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
      <button class="
        bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-blue-700 dark:hover:bg-blue-800
        border-2 border-transparent hover:border-blue-800 dark:hover:border-blue-300
        relative overflow-hidden
      ">
        <span class="relative z-10">Learn More</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
      <button class="
        bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-6 rounded-lg
        shadow-md transition duration-300 ease-in-out
        dark:bg-green-800 dark:hover:bg-green-900
        border-2 border-transparent hover:border-green-900 dark:hover:border-green-400
        relative overflow-hidden
      ">
        <span class="relative z-10">Our Products</span>
        <span class="
          absolute inset-0 bg-white/10 dark:bg-white/20 opacity-0
          hover:opacity-100 transition-opacity duration-300 ease-in-out
        "></span>
      </button>
    </div>
  </main>
</div>

Retour en haut de la page Composant du bouton

Un composant de bouton « Retour en haut » réactif conçu pour le commerce électronique, avec une palette de couleurs vives sur un fond sombre. Il comprend un effet de survol subtil et assure une visibilité sur toutes les tailles d’écran avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed bottom-4 right-4 z-50">
  <a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
    <svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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 class="sr-only">Back to Top</span>
  </a>
</div>

Composant Mentions de l’utilisateur

Un composant complexe et réactif pour les plates-formes éducatives avec un style aquarelle/artistique, une palette de couleurs neutres et froides et une prise en charge du mode sombre. Comprend des avatars d’utilisateurs, des noms, des rôles et un subtil effet d’arrière-plan aquarelle.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-8 md:p-12 min-h-screen">

  <!-- Watercolour Background Effect via pseudo-elements and gradients -->
  <style>
    .watercolor-bg {
      position: relative;
      overflow: hidden;
    }
    .watercolor-bg::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 10% 20%, rgba(200, 220, 230, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(200, 210, 220, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(230, 235, 240, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(210, 225, 235, 0.3) 0%, transparent 25%);
      background-blend-mode: overlay;
      opacity: 0.7;
      transform: rotate(15deg);
      z-index: -1;
      filter: blur(80px);
    }
    .dark .watercolor-bg::before {
      background: radial-gradient(circle at 10% 20%, rgba(60, 70, 80, 0.3) 0%, transparent 25%),
                  radial-gradient(circle at 70% 30%, rgba(50, 60, 70, 0.2) 0%, transparent 30%),
                  radial-gradient(circle at 30% 80%, rgba(70, 80, 90, 0.4) 0%, transparent 20%),
                  radial-gradient(circle at 90% 90%, rgba(60, 75, 85, 0.3) 0%, transparent 25%);
    }
  </style>

  <div class="max-w-4xl mx-auto rounded-3xl overflow-hidden 
              bg-gradient-to-br from-white to-stone-50 dark:from-stone-800 dark:to-stone-900
              shadow-xl dark:shadow-stone-700/30 border border-stone-200 dark:border-stone-700
              watercolor-bg relative p-6 sm:p-8 md:p-10">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 sm:mb-8 text-center">
      Mentions & Collaborators
    </h2>

    <p class="text-center text-stone-600 dark:text-stone-300 mb-8 sm:mb-10 text-lg">
      Engage with fellow learners and instructors by mentioning them in your discussions.
    </p>

    <!-- Search/Filter Input -->
    <div class="mb-8 sm:mb-10 relative">
      <input type="text" placeholder="Search users or roles..." class="w-full p-3 sm:p-4 pl-12 rounded-xl 
            bg-stone-100 dark:bg-stone-700 
            border border-stone-300 dark:border-stone-600 
            text-stone-800 dark:text-stone-50 
            placeholder-stone-500 dark:placeholder-stone-400 
            focus:ring-2 focus:ring-blue-400 focus:border-transparent 
            transition duration-200 ease-in-out">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
    </div>

    <!-- User List Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

      <!-- User Card 1 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Wonderland avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-blue-300 dark:ring-blue-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Alice Wonderland</h3>
        <p class="text-blue-600 dark:text-blue-400 text-sm font-medium mb-3">Lead Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Specializes in Advanced Algebra.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 2 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Bob The Builder avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-purple-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Bob The Builder</h3>
        <p class="text-purple-600 dark:text-purple-400 text-sm font-medium mb-3">Student Helper</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Experienced in Geometry.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 3 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Charlie Chaplin avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-green-300 dark:ring-green-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Charlie Chaplin</h3>
        <p class="text-green-600 dark:text-green-400 text-sm font-medium mb-3">Course Administrator</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Manages course registrations.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 4 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="David Copperfield avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-indigo-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">David Copperfield</h3>
        <p class="text-indigo-600 dark:text-indigo-400 text-sm font-medium mb-3">Teaching Assistant</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Aids with Calculus problems.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 5 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="Eve Harrington avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-pink-300 dark:ring-pink-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Eve Harrington</h3>
        <p class="text-pink-600 dark:text-pink-400 text-sm font-medium mb-3">Instructor</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Teaches Discrete Mathematics.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

      <!-- User Card 6 -->
      <div class="flex flex-col items-center p-5 sm:p-6 rounded-2xl 
                  bg-stone-50 dark:bg-stone-800 
                  shadow-md dark:shadow-stone-900/20 
                  border border-stone-200 dark:border-stone-700 
                  hover:shadow-lg dark:hover:shadow-stone-700/40 transform hover:-translate-y-1 transition duration-300 ease-in-out">
        <img src="https://randomuser.me/api/portraits/men/24.jpg" alt="Frankenstein avatar" class="w-20 h-20 sm:w-24 sm:h-24 rounded-full object-cover mb-4 ring-2 ring-orange-300 dark:ring-orange-600/70 p-0.5">
        <h3 class="text-xl font-semibold text-stone-900 dark:text-stone-50 mb-1">Frankenstein</h3>
        <p class="text-orange-600 dark:text-orange-400 text-sm font-medium mb-3">Student</p>
        <p class="text-center text-stone-600 dark:text-stone-300 text-sm">Learning Python Programming.</p>
        <button class="mt-4 px-4 py-2 text-sm rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Mention User
        </button>
      </div>

    </div>

    <!-- Pagination/Load More (Placeholder) -->
    <div class="mt-10 flex justify-center">
      <button class="px-6 py-3 rounded-full bg-blue-500 text-white text-lg font-medium 
                     hover:bg-blue-600 transition duration-300 ease-in-out 
                     focus:outline-none focus:ring-4 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-stone-800 
                     shadow-lg hover:shadow-xl">
        Load More Users
      </button>
    </div>

  </div>
</div>

360_Viewer_Component_Retro_Rainbow_Simple_Ecommerce

Un composant de visionneuse à 360° simple et rétro pour le commerce électronique, avec un dégradé arc-en-ciel, un design réactif et une prise en charge du mode sombre. Conçu pour évoquer la nostalgie des années 80/90.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono text-gray-800 dark:text-gray-200">
  <div class="w-full max-w-sm p-4 border-4 border-b-8 border-r-8 border-[#1A1A1A] dark:border-gray-600 rounded-lg shadow-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 overflow-hidden relative group">
    <!-- Top 'display' section -->
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 rounded-t-sm p-1 shadow-inner opacity-90">
      <div class="bg-black border border-gray-700 rounded-sm overflow-hidden aspect-video relative flex items-center justify-center">
        <img src="https://picsum.photos/400/300?random=1" alt="Product view" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"/>
        <!-- 'Lens flare' effect -->
        <div class="absolute w-1/2 h-1/2 bg-white opacity-10 rounded-full blur-xl animate-pulse"></div>
      </div>
    </div>

    <!-- Controls section -->
    <div class="p-3 bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 rounded-b-md shadow-inner mt-2 border-t-2 border-black dark:border-gray-800">
      <div class="flex justify-around items-center space-x-2">
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          &lt; prev
        </button>
        <button class="relative flex-none w-16 h-16 bg-gradient-to-br from-yellow-300 via-orange-400 to-red-500 dark:from-yellow-600 dark:via-orange-700 dark:to-red-800 rounded-full border-4 border-yellow-200 dark:border-yellow-500 grid place-items-center text-gray-900 dark:text-gray-100 font-extrabold text-2xl shadow-lg hover:from-yellow-200 hover:to-red-400 hover:shadow-xl transition-all duration-300 animate-bounce-slowest">
          &#x21BB;
          <!-- 360 icon -->
          <span class="absolute top-1 right-1 text-xs text-black dark:text-white transform rotate-12">360°</span>
        </button>
        <button class="flex-1 py-2 px-3 bg-gradient-to-br from-gray-700 to-gray-900 text-white dark:from-gray-200 dark:to-gray-400 dark:text-gray-900 rounded-full border-2 border-gray-500 dark:border-gray-600 text-sm font-bold shadow-md hover:from-gray-600 hover:to-gray-800 hover:scale-105 transition-transform duration-200 opacity-90">
          next &gt;
        </button>
      </div>
      <div class="flex justify-around items-center text-xs mt-3 text-white dark:text-gray-900 font-bold opacity-80">
        <span>Angle: 0°</span>
        <span>Zoom: 1x</span>
      </div>
    </div>

    <!-- Decorative 'LED' indicators -->
    <div class="absolute top-4 left-4 flex space-x-1.5">
      <span class="w-3 h-3 rounded-full bg-red-500 animate-pulse-slow shadow-lg shadow-red-500/50"></span>
      <span class="w-3 h-3 rounded-full bg-yellow-400 animate-pulse-slow animation-delay-100 shadow-lg shadow-yellow-400/50"></span>
      <span class="w-3 h-3 rounded-full bg-green-500 animate-pulse-slow animation-delay-200 shadow-lg shadow-green-500/50"></span>
    </div>

    <!-- Retro Price Tag -->
    <div class="absolute bottom-4 right-4 bg-gradient-to-br from-lime-300 to-green-500 dark:to-green-700 px-4 py-2 rounded-lg rotate-6 border-2 border-green-700 dark:border-green-300 shadow-xl font-bold text-lg text-black dark:text-gray-900 opacity-95 group-hover:rotate-0 group-hover:scale-110 transition-all duration-300">
        <span class="text-sm line-through text-red-700 dark:text-red-300">$129.99</span><br>$99.99
    </div>
  </div>

  <!-- Custom animations for retro feel -->
  <style>
    @keyframes bounce-slowest {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes pulse-slow {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    .animate-bounce-slowest {
      animation: bounce-slowest 3s infinite ease-in-out;
    }
    .animate-pulse-slow {
      animation: pulse-slow 2s infinite ease-in-out;
    }
    .animation-delay-100 {
      animation-delay: 0.1s;
    }
    .animation-delay-200 {
      animation-delay: 0.2s;
    }
  </style>
</div>

Composant Notifications Toast Art Déco

Un composant de notification toast simple et contrasté avec une esthétique Art déco, adapté aux sites d’information et de journalisme. Dispose d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-xs pointer-events-none p-4">
  <!-- Success Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-green-600 dark:border-green-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden mb-4 transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
  <div class="flex items-center p-4 border-b-2 border-green-600 dark:border-green-400 bg-green-500 dark:bg-green-700/80">
      <svg class="w-6 h-6 text-white mr-3" 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>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Success!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-500 dark:bg-green-700/80 text-white hover:text-green-900 focus:ring-2 focus:ring-green-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Your article has been successfully published to the public eye. Check your dashboard for insights.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-red-600 dark:border-red-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
    <div class="flex items-center p-4 border-b-2 border-red-600 dark:border-red-400 bg-red-500 dark:bg-red-700/80">
      <svg class="w-6 h-6 text-white mr-3" 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 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Error!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-500 dark:bg-red-700/80 text-white hover:text-red-900 focus:ring-2 focus:ring-red-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <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="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Failed to publish your article. Please check your network connection or try again later.</p>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .md\:animate-slide-in-right {
    animation: none; /* Reset for mobile */
  }

  @media (min-width: 768px) {
    .md\:animate-slide-in-right {
      animation: slide-in-right 0.5s ease-out forwards;
    }
  }
</style>

Volet Composantes sociales

Un composant social simple, sur le thème rétro/vintage, inspiré des documents papier/imprimés pour le commerce électronique, présentant un extrait de profil d’utilisateur avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-800 text-stone-800 dark:text-stone-200 min-h-screen">
  <div class="max-w-xs mx-auto bg-amber-100 dark:bg-zinc-700 shadow-md shadow-stone-300 dark:shadow-zinc-900 rounded-lg overflow-hidden border border-amber-200 dark:border-zinc-600 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-stone-400 dark:hover:shadow-zinc-950">
    <div class="relative p-4 sm:p-5 border-b border-amber-200 dark:border-zinc-600">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-semibold text-stone-700 dark:text-stone-100">User Profile</h3>
        <button aria-label="Settings" class="text-stone-500 dark:text-stone-300 hover:text-stone-700 dark:hover:text-stone-100 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-amber-300 dark:border-zinc-500 mb-4 object-cover shadow-sm shadow-stone-300 dark:shadow-zinc-900" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-700 dark:text-stone-100 mb-1">Jane Doe</h4>
      <p class="text-sm text-stone-500 dark:text-stone-300 mb-4">Verified Buyer</p>
      <div class="flex space-x-4 mb-4">
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">124</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">89</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Following</p>
        </div>
      </div>
      <button class="w-full py-2 px-4 rounded-md bg-rose-500 dark:bg-rose-700 text-white text-base font-medium shadow-sm transition-all duration-200 ease-in-out hover:bg-rose-600 dark:hover:bg-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-400 dark:focus:ring-rose-600 focus:ring-opacity-75">
        View Profile
      </button>
    </div>
    <div class="p-4 sm:p-5 border-t border-amber-200 dark:border-zinc-600 bg-amber-50 dark:bg-zinc-800 text-center">
      <p class="text-xs text-stone-500 dark:text-stone-400">Last active 2 hours ago</p>
    </div>
  </div>
</div>

Composant d’en-tête

Composant d’en-tête simple et réactif pour un blog ou un site de contenu avec un style monochromatique et une prise en charge du mode sombre, en se concentrant sur des micro-interactions subtiles lors du survol des liens de navigation.

Ouvrir Aperçu

                <header class="bg-gray-100 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-300">
  <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl font-bold text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
        MyBlog
      </a>
    </div>
    <nav class="">
      <ul class="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Home
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Articles
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            About
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
        <li>
          <a href="#" class="relative text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all duration-200 ease-in-out font-medium group py-1 px-2 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
            Contact
            <span class="absolute left-0 bottom-0 w-full h-0.5 bg-gray-500 dark:bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</header>

1 ... 12 13 14 15 16 ... 335

Rechercher des composants

Catégories

Tous les composants