Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Profils utilisateur

Un composant de profils d’utilisateurs réactif et minimaliste pour les médias sociaux, avec plusieurs profils avec des informations sur l’utilisateur, des boutons de suivi et la prise en charge du mode sombre. Utilise un schéma de couleurs analogue.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-slate-900 dark:to-gray-900 min-h-screen font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center">
      Featured Profiles
    </h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile picture of Jane Doe">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Jane Doe</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@janedo_e</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Passionate photographer exploring the world's hidden beauty through my lens. Sharing moments, one click at a time.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.2K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">350</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">98</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile picture of John Smith">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">John Smith</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@johns_dev</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Frontend developer building engaging user experiences. Passionate about clean code and modern web technologies.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">870</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">210</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">65</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile picture of Sarah Lee">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Sarah Lee</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@sarah_art</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Digital artist and illustrator. Turning imagination into vivid colors and captivating visuals. Always learning, always creating.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.5K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">400</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">120</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile picture of Mike Ross">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Mike Ross</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@mikero_ss</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Travel enthusiast documenting journeys across continents. Seeking adventure and sharing the beauty of different cultures.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">950</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">280</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">80</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 5 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture of Emily White">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Emily White</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@emily_reads</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Book lover and aspiring writer. Diving into new worlds, one page at a time. Sharing reviews and literary thoughts.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">720</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">190</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">55</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

      <!-- Profile Card 6 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
        <img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Profile picture of David Green">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">David Green</h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@david_music</p>
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Musician and composer. Creating melodies that tell stories. Exploring sounds from classical to electronic.</p>
        <div class="flex justify-center gap-4 mb-4">
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">1.1K</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">300</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
          </div>
          <div class="text-gray-700 dark:text-gray-300">
            <p class="font-bold text-lg leading-tight">110</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
          </div>
        </div>
        <button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
          Follow
        </button>
      </div>

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

Composant de navigation cryptographique ludique en niveaux de gris

Un composant de navigation en niveaux de gris ludique et convivial pour les applications de crypto-monnaie et de blockchain, avec des éléments arrondis, des états interactifs, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-gray-100 dark:bg-gray-900 shadow-md rounded-b-3xl p-4 md:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
    <div class="flex items-center justify-between w-full md:w-auto mb-4 md:mb-0">
      <a href="#" class="text-gray-800 dark:text-gray-200 text-3xl font-extrabold flex items-center group">
        <svg class="w-9 h-9 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-800 dark:group-hover:text-gray-200 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 8h6m-5 0v3m-2.83 5.46a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27m7.53 1.05a3 3 0 01-4 0c-1.5-1.5-1-4.75-.8-6.68A7.832 7.832 0 0113 4a7.832 7.832 0 015.63 2.78c.2.93.43 2.15.8 3.82.26 1.15.53 2.3.84 3.42.3.93.67 1.8.96 2.58A5.733 5.733 0 0122 17.5c0 2.22-1.78 4-4 4h-2m-7 0H6a4 4 0 01-4-4v-4l-.52-1.04a1 1 0 01-.13-.46c0-.25.1-.48.27-.66.17-.18.4-.28.65-.28.25 0 .48.1.65.28l.27.27"></path>
        </svg>
        CoinWave
      </a>
      <button id="navbar-toggle" class="md:hidden focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 rounded-full p-2 ml-4">
        <svg class="w-8 h-8 text-gray-600 dark:text-gray-400 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <div id="navbar-menu" class="hidden md:flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 lg:space-x-12 w-full md:w-auto transition-all duration-300 ease-in-out">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Dashboard</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Markets</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Wallet</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Trade</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-medium text-lg px-4 py-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">Academy</a>

      <div class="flex items-center space-x-4 mt-4 md:mt-0">
        <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
          <svg class="w-7 h-7" 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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
          </svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 object-cover hover:scale-105 transition-transform duration-200 cursor-pointer">
        <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600 transition-colors duration-200">
          <svg class="w-7 h-7 hidden dark:block" 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 3v1m0 16v1m9-9h1M3 12H2m8.006-8.226l-.707-.707m-4.004 4.004l-.707-.707m11.313 11.313l-.707-.707m-4.004-4.004l-.707-.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <svg class="w-7 h-7 dark:hidden" 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggle functionality (not part of the HTML component, but for interactivity demonstration)
  const navbarToggle = document.getElementById('navbar-toggle');
  const navbarMenu = document.getElementById('navbar-menu');
  const themeToggle = document.getElementById('theme-toggle');

  navbarToggle.addEventListener('click', () => {
    navbarMenu.classList.toggle('hidden');
    navbarMenu.classList.toggle('flex');
    navbarMenu.classList.toggle('flex-col');
  });

  // Dark mode functionality
  function setTheme(theme) {
    localStorage.setItem('theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }

  // On page load or when dark mode is changed
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    setTheme(storedTheme);
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    setTheme('dark');
  } else {
    setTheme('light');
  }

  themeToggle.addEventListener('click', () => {
    const currentTheme = localStorage.getItem('theme');
    setTheme(currentTheme === 'dark' ? 'light' : 'dark');
  });
</script>

Composant d’alerte de délai d’expiration de session - Aquarelle/Artistique

Un composant complexe et réactif d’alerte de délai d’expiration de session pour le commerce électronique, avec un design aquarelle/artistique avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre. Comprend des options pour prolonger ou se déconnecter.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-black dark:bg-opacity-85 font-sans">
  <div class="relative w-full max-w-md p-6 overflow-hidden rounded-3xl shadow-2xl backdrop-blur-sm dark:shadow-purple-900/50 transform transition-all duration-300 ease-in-out scale-100 opacity-100
      bg-gradient-to-br from-purple-200 via-pink-100 to-yellow-100 dark:from-purple-900 dark:via-blue-800 dark:to-green-800
      border border-purple-300 dark:border-purple-700
      flex flex-col items-center text-center
      " style="background-image: url('https://picsum.photos/seed/watercolor_bg/800/600?blur=1'); background-size: cover; background-position: center; border-radius: 2rem;">

        <!-- Artistic Overlay / Texture -->
        <div class="absolute inset-0 bg-gradient-to-br from-red-500/20 via-yellow-500/20 to-blue-500/20 opacity-70 dark:opacity-50" style="mask-image: url('data:image/svg+xml;utf8,<svg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'noiseFilter\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.5\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feComposite operator=\'in\' in2=\'SourceGraphic\' result=\'comp\'></feComposite></filter><rect width=\'100%\' height=\'100%\' filter=\'url(#noiseFilter)\'/></svg>'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; z-index: 0; border-radius: 2rem;"></div>

        <!-- Content Wrapper with internal padding -->
        <div class="relative z-10 p-4 sm:p-6 lg:p-8 ">
            <div class="relative mb-6 w-24 h-24 sm:w-28 sm:h-28 mx-auto -mt-16 sm:-mt-20 lg:-mt-24 rounded-full p-2
                        bg-gradient-to-br from-red-400 via-orange-400 to-yellow-400 dark:from-red-600 dark:via-orange-600 dark:to-yellow-600
                        shadow-lg ring-4 ring-white dark:ring-gray-800 transform rotate-3 hover:rotate-0 transition-transform duration-300">
                <svg class="h-full w-full text-white dark:text-gray-200 p-2" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2Zm0 13a1 1 0 1 1 0 2a1 1 0 0 1 0-2Zm0-8a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1Z"/>
                </svg>
            </div>

            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                       bg-clip-text text-transparent
                       bg-gradient-to-r from-purple-700 via-pink-500 to-red-500
                       dark:from-blue-400 dark:via-green-300 dark:to-yellow-200 line-clamp-2">
                Session Ending Soon!
            </h2>

            <p class="text-base sm:text-lg lg:text-xl text-gray-700 dark:text-gray-200 mb-6 font-medium leading-relaxed max-w-prose mx-auto">
                Your session is about to expire. Would you like to stay logged in or log out?
            </p>

            <div class="flex flex-col sm:flex-row justify-center gap-4 w-full">
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-gradient-to-br from-blue-400 via-teal-400 to-green-400 text-white shadow-md
                                hover:from-blue-500 hover:via-teal-500 hover:to-green-500
                                focus:outline-none focus:ring-4 focus:ring-blue-300 focus:ring-opacity-75
                                dark:from-blue-600 dark:via-teal-600 dark:to-green-600 dark:hover:from-blue-700 dark:hover:via-teal-700 border border-blue-500 dark:border-blue-700">
                    Extend Session
                </button>
                <button class="flex-1 py-3 px-6 sm:py-4 sm:px-8 rounded-full font-bold text-lg sm:text-xl transform hover:scale-105 transition-all duration-300 ease-in-out
                                bg-white text-gray-800 shadow-md border border-gray-300
                                hover:bg-gray-100 hover:text-gray-900
                                focus:outline-none focus:ring-4 focus:ring-gray-300 focus:ring-opacity-75
                                dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white">
                    Log Out
                </button>
            </div>

            <div class="mt-8 text-sm sm:text-base text-gray-500 dark:text-gray-400">
                <p class="mb-2"><span class="font-semibold">Automatic logout in:</span> <span class="text-purple-600 dark:text-blue-400 font-bold text-lg">02:30</span></p>
                <p>Enjoy your shopping experience!</p>
            </div>

            <!-- Artistic Footer Element -->
            <div class="mt-8 h-2 w-3/4 mx-auto rounded-full
                        bg-gradient-to-r from-red-300 via-purple-300 to-blue-300
                        dark:from-red-600 dark:via-purple-600 dark:to-blue-600
                        shadow-inner opacity-80"></div>
        </div>
    </div>
</div>

Composant Composants de visualisation de données

Un composant de visualisation de données simple, propre et inspiré du code pour la documentation/les sites wiki, avec des polices monospace, une esthétique terminale et des tons de couleur sépia/marron, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-mono p-4 sm:p-6 md:p-8 bg-amber-50 text-amber-900 dark:bg-stone-900 dark:text-stone-100 min-h-screen">

  <div class="max-w-4xl mx-auto border border-amber-200 dark:border-stone-700 shadow-md transform hover:shadow-lg transition-all duration-300 ease-in-out">
    <!-- Header/Title Bar -->
    <div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-b border-amber-200 dark:border-stone-700">
      <div class="flex space-x-1.5">
        <span class="block w-3 h-3 rounded-full bg-red-400"></span>
        <span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
        <span class="block w-3 h-3 rounded-full bg-green-400"></span>
      </div>
      <div class="text-xs text-amber-700 dark:text-stone-300">data_viz_component.sh</div>
      <div class="flex space-x-2 text-amber-700 dark:text-stone-300 text-sm">
        <span>_</span>
        <span>&#9633;</span>
        <span>X</span>
      </div>
    </div>

    <!-- Content Area -->
    <div class="p-4 sm:p-6 bg-amber-50 dark:bg-stone-900 overflow-x-auto">
      <pre class="text-sm whitespace-pre-wrap">
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">cat</span> data_summary.json
{
  <span class="text-orange-700 dark:text-amber-200">"project"</span>: <span class="text-orange-500 dark:text-orange-300">"Documentation Portal"</span>,
  <span class="text-orange-700 dark:text-amber-200">"version"</span>: <span class="text-orange-500 dark:text-orange-300">"1.0.0"</span>,
  <span class="text-orange-700 dark:text-amber-200">"last_updated"</span>: <span class="text-orange-500 dark:text-orange-300">"2023-10-27"</span>,
  <span class="text-orange-700 dark:text-amber-200">"data_points"</span>: <span class="text-orange-500 dark:text-orange-300">567</span>,
  <span class="text-orange-700 dark:text-amber-200">"avg_daily_views"</span>: <span class="text-orange-500 dark:text-orange-300">1234</span>,
  <span class="text-orange-700 dark:text-amber-200">"status"</span>: <span class="text-orange-500 dark:text-orange-300">"Operational"</span>,
  <span class="text-orange-700 dark:text-amber-200">"components"</span>: [
    <span class="text-orange-500 dark:text-orange-300">"Charts"</span>,
    <span class="text-orange-500 dark:text-orange-300">"Tables"</span>,
    <span class="text-orange-500 dark:text-orange-300">"Graphs"</span>
  ]
}
<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Generating simple data visualization..."
Generating simple data visualization...

<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">./render_viz.sh</span>

<span class="block mt-4 w-full h-48 bg-amber-200 dark:bg-stone-700 relative overflow-hidden">
  <!-- Simple Bar Chart Placeholder -->
  <div class="absolute bottom-0 w-full flex items-end justify-around h-full p-2">
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/4 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C1</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-2/3 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C2</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/2 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C3</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-3/4 bg-amber-500 dark:bg-amber-700 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C4</span>
    </div>
    <div class="flex flex-col items-center h-full justify-end">
      <div class="w-4 sm:w-6 h-1/3 bg-amber-400 dark:bg-amber-600 rounded-sm mb-1"></div>
      <span class="text-xs text-amber-700 dark:text-stone-300">C5</span>
    </div>
  </div>
</span>

<span class="text-amber-600 dark:text-orange-400">$</span> <span class="text-orange-700 dark:text-amber-200">echo</span> "Visualization complete."
Visualization complete.
      </pre>
    </div>

    <!-- Footer/Status Bar -->
    <div class="flex items-center justify-between px-4 py-2 bg-amber-100 dark:bg-stone-800 border-t border-amber-200 dark:border-stone-700 text-xs text-amber-700 dark:text-stone-300">
      <span>user@host:~/docs/viz</span>
      <span>[Status: OK]</span>
    </div>
  </div>

</div>

Composant Mentions de l’utilisateur

Un composant simple et réactif avec un design glassmorphism, une palette de couleurs bleues d’entreprise et une prise en charge du mode sombre, adapté aux interfaces de tableau de bord.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm mx-auto p-6 rounded-xl shadow-2xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-blue-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-blue-700 transform transition-all duration-300 hover:scale-105">
    <h3 class="text-xl font-semibold text-blue-800 dark:text-blue-200 mb-6 text-center tracking-wide">
      Recent Mentions
    </h3>
    <div class="space-y-4">
      <!-- Mention Item 1 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@john_doe <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">1h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Mentioned you in a report update.</p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@jane_smith <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">3h ago</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Asked for your feedback on the new design.</p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="flex items-center space-x-4 bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-40 p-3 rounded-lg shadow-md transition-all duration-200 hover:bg-opacity-40 dark:hover:bg-opacity-50">
        <img class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-500" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-blue-900 dark:text-blue-100 font-medium text-sm sm:text-base">@alex_williams <span class="text-xs text-blue-700 dark:text-blue-300 ml-1">Yesterday</span></p>
          <p class="text-blue-700 dark:text-blue-300 text-sm overflow-hidden text-ellipsis whitespace-nowrap">Shared a useful resource in the team chat.</p>
        </div>
      </div>
    </div>
    <button class="mt-8 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg transform transition-all duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      View All Mentions
    </button>
  </div>
</div>

Composante des composantes interactives

Un composant complexe et interactif de style Neumorphisme avec une palette de couleurs vives, conçu pour les sites Web d’alimentation/restaurants. Il comprend des boutons interactifs, des curseurs et des éléments de sélection, avec une prise en charge du mode sombre et une réactivité totale.

Ouvrir Aperçu

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

  <!-- Component Wrapper -->
  <div class="max-w-4xl mx-auto p-6 lg:p-8 rounded-3xl shadow-xl border border-white dark:border-gray-700
              bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-850 dark:to-gray-950
              transform transition-all duration-300 hover:shadow-2xl hover:scale-100 dark:hover:shadow-lg">

    <h1 class="text-4xl lg:text-5xl font-extrabold mb-8 text-center
               text-indigo-700 dark:text-purple-400
               text-shadow-md drop-shadow-lg
               relative after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2 
               after:w-16 after:h-1.5 after:rounded-full after:bg-purple-500 dark:after:bg-indigo-300">
      Order delicious food!</h1>

    <!-- Category Selection -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Categories</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

        <!-- Category Card 1 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1080/100/100" alt="Burger" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Burgers</span>
        </button>

        <!-- Category Card 2 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1040/100/100" alt="Pizza" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Pizzas</span>
        </button>

        <!-- Category Card 3 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1050/100/100" alt="Sushi" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Sushi</span>
        </button>

        <!-- Category Card 4 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1049/100/100" alt="Desserts" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Desserts</span>
        </button>
      </div>
    </div>

    <!-- Price Range Slider (Conceptual) -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Price Range</h2>
      <div class="p-4 rounded-xl shadow-inner-neumorphism dark:shadow-inner-neumorphism-dark flex items-center justify-center">
        <label for="price-range" class="sr-only">Price Range</label>
        <input type="range" id="price-range" min="5" max="50" value="25" class="w-full h-3 rounded-full cursor-pointer
              bg-purple-300 dark:bg-gray-700
              accent-purple-600 dark:accent-indigo-400
              shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
              focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-indigo-300
              transition duration-200 ease-in-out
              [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:-mt-1.5 
              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-600 dark:[&::-webkit-slider-thumb]:bg-indigo-400
              [&::-webkit-slider-thumb]:shadow-neumorphism dark:[&::-webkit-slider-thumb]:shadow-neumorphism-dark
              [&::-webkit-slider-thumb]:appearance-none
              [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:-mt-1.5 
              [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-600 dark:[&::-moz-range-thumb]:bg-indigo-400
              [&::-moz-range-thumb]:shadow-neumorphism dark:[&::-moz-range-thumb]:shadow-neumorphism-dark
              [&::-moz-range-thumb]:appearance-none
              ">
      </div>
      <div class="mt-2 flex justify-between text-sm text-gray-600 dark:text-gray-400">
        <span>$5</span>
        <span>$50</span>
      </div>
    </div>

    <!-- Dietary Preferences / Multiple Choice -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Dietary Preferences</h2>
      <div class="flex flex-wrap gap-4">

        <!-- Checkbox 1 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="vegan" class="sr-only">
          <label for="vegan" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegan</span>
          </label>
        </div>

        <!-- Checkbox 2 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="gluten-free" class="sr-only">
          <label for="gluten-free" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Gluten-Free</span>
          </label>
        </div>

        <!-- Checkbox 3 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="vegetarian" class="sr-only">
          <label for="vegetarian" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegetarian</span>
          </label>
        </div>

      </div>
    </div>

    <!-- Quantity Selector / Spinner (Conceptual) -->
    <div class="mb-10 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-purple-700 dark:text-indigo-400">Quantity:</h2>
      <div class="flex items-center space-x-4 p-2 rounded-full
                  shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                  bg-purple-100 dark:bg-gray-800">
        <button aria-label="Decrease quantity" class="neumorphism-button-icon-round">
          <svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" 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="M18 12H6"></path>
          </svg>
        </button>
        <span class="text-2xl font-bold text-indigo-700 dark:text-purple-400">1</span> <!-- This would be dynamic -->
        <button aria-label="Increase quantity" class="neumorphism-button-icon-round">
          <svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" 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>
        </button>
      </div>
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-6 mt-12 justify-center">
      <button class="neumorphism-button-lg bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700
                     active:bg-pink-700 dark:active:bg-pink-800
                     text-white">
        <svg class="w-6 h-6 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Add to Cart
      </button>
      <button class="neumorphism-button-lg bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-600
                     active:bg-yellow-600 dark:active:bg-yellow-700
                     text-gray-900">
        <svg class="w-6 h-6 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="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
        Checkout Now
      </button>
    </div>

    <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
      Experience the soft magic of Neumorphism with vibrant flavors!
    </p>

  </div>

  <!-- Tailwind JIT custom classes for Neumorphism -->
  <style>
    /* Base Neumorphism Shadows */
    .shadow-neumorphism {
      box-shadow: 6px 6px 12px #b0c4e7, -6px -6px 12px #e0f0ff;
    }
    .dark .shadow-neumorphism {
      box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }

    .shadow-neumorphism-sm {
      box-shadow: 3px 3px 6px #b0c4e7, -3px -3px 6px #e0f0ff;
    }
    .dark .shadow-neumorphism-sm {
      box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }

    /* Inner Neumorphism Shadows (for pressed/active states) */
    .shadow-inner-neumorphism {
      box-shadow: inset 3px 3px 6px #9aaed1, inset -3px -3px 6px #f6ffff;
    }
    .dark .shadow-inner-neumorphism {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    .shadow-inner-neumorphism-sm {
      box-shadow: inset 2px 2px 4px #9aaed1, inset -2px -2px 4px #f6ffff;
    }
    .dark .shadow-inner-neumorphism-sm {
      box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }

    /* Specific Component Styles */
    .category-button {
      @apply flex flex-col items-center p-4 rounded-2xl cursor-pointer select-none
             bg-purple-100 dark:bg-gray-800
             shadow-neumorphism dark:shadow-neumorphism-dark
             transform transition-all duration-200
             hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-lg-dark
             active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
             active:translate-y-0.5;
    }
    .dark .category-button {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark .category-button:hover {
        box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }
    .dark .category-button:active {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    /* General Button Style */
    .neumorphism-button-lg {
      @apply flex items-center justify-center px-8 py-4 rounded-full font-bold text-xl
             shadow-neumorphism dark:shadow-neumorphism-dark
             transform transition-all duration-200
             hover:-translate-y-1 hover:scale-105 hover:shadow-lg dark:hover:shadow-lg-dark
             active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
             active:translate-y-0.5 active:scale-98;
             white-space: nowrap; /* Prevent text wrapping */
    }
    .dark .neumorphism-button-lg {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark .neumorphism-button-lg:hover {
        box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }
    .dark .neumorphism-button-lg:active {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    /* Round Icon Button */
    .neumorphism-button-icon-round {
      @apply p-3 rounded-full
             shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
             bg-purple-200 dark:bg-gray-700
             transform transition-all duration-200
             hover:scale-110 hover:-translate-y-0.5
             active:shadow-inner-neumorphism-sm dark:active:shadow-inner-neumorphism-sm-dark
             active:translate-y-0.5 active:scale-95;
    }
    .dark .neumorphism-button-icon-round {
        box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }
    .dark .neumorphism-button-icon-round:hover {
        box-shadow: 4px 4px 8px #1a1a22, -4px -4px 8px #414151;
    }
    .dark .neumorphism-button-icon-round:active {
      box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }

    /* Checkbox Styles */
    .neumorphism-checkbox-label {
      @apply flex items-center cursor-pointer select-none;
    }
    .neumorphism-checkbox input[type="checkbox"]:focus + .neumorphism-checkbox-label div {
      @apply ring-2 ring-purple-400 dark:ring-indigo-300 ring-offset-2 ring-offset-purple-50 dark:ring-offset-gray-900;
    }

    /* Dark Mode specific shadows that Tailwind doesn't allow for custom properties within theme easily */
    .dark\:shadow-neumorphism-dark {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark\:shadow-neumorphism-sm-dark {
        box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }
    .dark\:shadow-inner-neumorphism-dark {
        box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }
    .dark\:shadow-inner-neumorphism-sm-dark {
        box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }
    .dark\:hover\:shadow-lg-dark {
      box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }

    /* Custom text shadow */
    .text-shadow-md {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .dark .text-shadow-md {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
  </style>
</div>

Glassmorphism Niveaux de gris Soins de santé Footer

Un composant de navigation de pied de page réactif, de style glassmorphism, pour les applications médicales/de santé, utilisant un schéma de couleurs en niveaux de gris avec prise en charge du mode sombre. Il comporte des éléments translucides givrés ressemblant à du verre et des liens interactifs.

Ouvrir Aperçu

                <footer class="relative overflow-hidden bg-white/50 backdrop-blur-md dark:bg-gray-900/50 dark:backdrop-blur-md py-12 md:py-16 border-t-2 border-gray-200 dark:border-gray-800">
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#e0e0e0"></stop>
          <stop offset="100%" stop-color="#f0f0f0"></stop>
        </radialGradient>
        <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="0%" stop-color="#a0a0a0"></stop>
          <stop offset="100%" stop-color="#c0c0c0"></stop>
        </radialGradient>
      </defs>
      <circle cx="20" cy="30" r="30" fill="url(#grad1)" opacity="0.7" />
      <circle cx="80" cy="70" r="40" fill="url(#grad2)" opacity="0.7" />
    </svg>
  </div>

  <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
      <!-- Company Info -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100">MedCare Health</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
          Providing compassionate and advanced healthcare solutions for a healthier tomorrow.
        </p>
        <ul class="flex space-x-4">
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22h7.42c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.24 1.332 2.71 2.029 4.15 2.029 3.325 0 5.981-2.656 5.981-5.981 0-0.342-.033-0.678-.088-1.006 1.258-0.871 2.259-1.991 3.015-3.269-0.038 0.051-0.071 0.101-0.109 0.151-1.282 1.484-3.056 2.378-5.74 2.875 1.442-0.867 2.478-2.364 2.986-4.085-1.353 0.803-2.859 1.385-4.472 1.63-1.277-1.36-3.045-2.212-5.04-2.212-3.844 0-6.958 3.114-6.958 6.958 0 0.546 0.063 1.077 0.17 1.597-5.798-0.292-10.9-3.054-14.331-7.243-0.592 1.01-0.929 2.193-0.929 3.468 0 2.41 1.229 4.545 3.094 5.795-1.144-0.032-2.222-0.345-3.155-0.862v0.086c0 3.383 2.404 6.136 5.583 6.791-0.589 0.16-1.213 0.245-1.854 0.245-0.455 0-0.899-0.043-1.331-0.127 0.873 2.766 3.424 4.779 6.442 4.838-2.673 2.093-6.027 3.344-9.688 3.344-0.627 0-1.242-0.038-1.847-0.108 3.473 2.248 7.593 3.563 11.996 3.563Z" /></svg></a></li>
          <li><a href="#" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 transition-colors"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.865 8.163 6.838 9.504.5.092.682-.217.682-.483 0-.237-.007-.866-.012-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.068-.607.068-.607 1.002.07 1.536 1.03 1.536 1.03.892 1.527 2.342 1.085 2.91.829.091-.643.349-1.085.635-1.334-2.22-.25-4.555-1.11-4.555-4.943 0-1.09.39-1.978 1.029-2.674-.103-.251-.446-1.264.098-2.632 0 0 .84-.268 2.75 1.025A9.303 9.303 0 0 1 12 6.687c.85.006 1.7.117 2.502.324 1.908-1.293 2.747-1.025 2.747-1.025.544 1.368.201 2.381.098 2.632.64.696 1.029 1.584 1.029 2.674 0 3.842-2.339 4.689-4.566 4.935.359.307.678.915.678 1.846 0 1.334-.012 2.413-.012 2.74 0 .267.18.579.688.482C21.137 20.163 24 16.418 24 12c0-5.523-4.477-10-10-10Z" clip-rule="evenodd" /></svg></a></li>
        </ul>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Our Services</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Departments</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Find a Doctor</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Patient Resources</a></li>
          <li><a href="#" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 transition-colors text-sm">Careers</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Contact Us</h3>
        <ul class="space-y-3">
          <li class="flex items-start text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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.828 0L6.343 16.657a8 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>
            123 Health Ave, Suite 400, Medical City, MC 10001
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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.95 4.81A3 3 0 0012.72 6h4.04a2 2 0 012 2.02v2.83a1 1 0 00.512.854l2.57 1.144a4 4 0 010 7.21l-2.57 1.144a1 1 0 00-.512.854v2.83a2 2 0 01-2 2.02h-4.04a3 3 0 00-1.77 0l-2.75 1.137a1 1 0 01-.948.684H5a2 2 0 01-2-2V5z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.875 17.5l-2.617-2.617a1 1 0 010-1.414l2.617-2.617a1 1 0 011.414 0l2.617 2.617a1 1 0 010 1.414l-2.617 2.617a1 1 0 01-1.414 0z"></path></svg>
            (555) 123-4567
          </li>
          <li class="flex items-center text-gray-600 dark:text-gray-300 text-sm">
            <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400 flex-shrink-0" 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.893 5.262a2 2 0 002.214 0L21 8m-1 10a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h12a2 2 0 012 2v12z"></path></svg>
            [email protected]
          </li>
        </ul>
      </div>

      <!-- Newsletter/Appointment -->
      <div>
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Stay Connected</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Subscribe to our newsletter for health tips and updates.</p>
        <form class="flex flex-col sm:flex-row gap-2">
          <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-lg bg-gray-100/70 border border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:bg-gray-800/70 dark:border-gray-700 dark:text-gray-100 dark:focus:ring-gray-600 text-sm placeholder-gray-500 dark:placeholder-gray-400" aria-label="Email for newsletter">
          <button type="submit" class="px-5 py-2 rounded-lg bg-gray-800 text-white font-medium hover:bg-gray-700 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 transition-colors text-sm">Subscribe</button>
        </form>
        <p class="text-gray-600 dark:text-gray-300 text-sm mt-4">Need an appointment? <a href="#" class="font-medium text-gray-800 hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100 transition-colors">Book Now</a></p>
      </div>
    </div>

    <div class="mt-12 md:mt-16 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 MedCare Health. All rights reserved.</p>
    </div>
  </div>
</footer>

Volet Forum communautaire

Un composant de forum communautaire réactif pour la finance/banque avec un style de conception matérielle et une palette de couleurs bonbon/doux, avec des couleurs vives comme le rose chewing-gum et le vert menthe, la prise en charge du mode sombre et le HTML sémantique.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-pink-100 via-purple-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden">
    <header class="p-4 sm:p-6 bg-gradient-to-r from-pink-400 to-purple-500 dark:from-gray-900 dark:to-purple-900 text-white rounded-t-xl shadow-md">
      <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight mb-1">Finance Community Forum</h1>
      <p class="text-sm opacity-90">Connect, share, and learn about financial insights.</p>
    </header>

    <div class="flex flex-col md:flex-row gap-4 p-4 sm:p-6">
      <!-- Left Sidebar: Categories/Navigation -->
      <aside class="w-full md:w-1/4 bg-purple-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
        <h2 class="text-lg sm:text-xl font-semibold text-purple-700 dark:text-purple-300 mb-4">Categories</h2>
        <nav>
          <ul class="space-y-3">
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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.75 17L9 20l-1 1h8l-1-1-1.25-3M15.75 17H18a2 2 0 002-2V7a2 2 0 00-2-2H6a2 2 0 00-2 2v8a2 2 0 002 2h2.25"/></svg>
                Investing Strategies
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md bg-purple-200 dark:bg-purple-800 text-purple-900 dark:text-white font-semibold transition-colors">
                <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 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.592 1L21 9m-4.475-1.256l-6.223 3.597m-4.047 5.086c.863-.092 1.63-.33 2.274-.692m0 0a2.003 2.003 0 01-1.422-4.242M10.88 16c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 5.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21.01c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03M12 21c-.021-.051 0-.107.017-.16A5.5 5.5 0 0012 12.5a5.5 5.5 0 00-5.5 5.5c0 1.01 0 2.02-.017 3.03"/></svg>
                Personal Finance
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M10 20l4-16m4 4l4 4-4 4M6 4l-4 4 4 4"/></svg>
                Market Analysis
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center gap-2 p-2 rounded-md hover:bg-purple-200 dark:hover:bg-gray-600 text-purple-800 dark:text-purple-200 font-medium transition-colors">
                <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                Banking & Loans
              </a>
            </li>
          </ul>
        </nav>
        <button class="mt-6 w-full py-2 px-4 bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-lg shadow-md transition-colors">
          <svg class="w-4 h-4 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          New Thread
        </button>
      </aside>

      <!-- Main Content: Threads List -->
      <main class="w-full md:w-3/4">
        <section class="bg-green-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm mb-4">
          <h2 class="text-lg sm:text-xl font-semibold text-green-700 dark:text-green-300 mb-4">Latest Threads</h2>
          <div class="space-y-4">
            <!-- Thread Item 1 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Understanding the Latest Fed Rate Hike</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Discussing the implications for mortgages and savings accounts.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">15 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span>
                <span class="mx-2">•</span>
                <span>2 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Personal Finance</span>
              </div>
            </article>

            <!-- Thread Item 2 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Beginner's Guide to Stock Market Investing</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Tips and resources for new investors.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">32 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
                <span class="mx-2">•</span>
                <span>5 hours ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Investing Strategies</span>
              </div>
            </article>

            <!-- Thread Item 3 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Future of Digital Currencies in Banking</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Exploring CBDCs and their impact on traditional banking.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">8 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">David Lee</span>
                <span class="mx-2">•</span>
                <span>1 day ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Banking & Loans</span>
              </div>
            </article>

            <!-- Thread Item 4 -->
            <article class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
              <div class="flex items-start justify-between">
                <div>
                  <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">Q3 Earnings Report Analysis: Tech Sector</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Deep dive into recent tech company performance.</p>
                </div>
                <div class="flex items-center space-x-2 text-gray-500 dark:text-gray-400">
                  <span class="text-sm">20 replies</span>
                  <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                </div>
              </div>
              <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
                <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar" class="w-6 h-6 rounded-full mr-2 border border-pink-400 dark:border-purple-600">
                <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span>
                <span class="mx-2">•</span>
                <span>2 days ago</span>
                <span class="ml-auto text-pink-600 dark:text-teal-400 font-semibold">Market Analysis</span>
              </div>
            </article>

          </div>
          <div class="mt-6 flex justify-center">
            <button class="py-2 px-6 bg-pink-500 hover:bg-pink-600 dark:bg-teal-600 dark:hover:bg-teal-500 text-white font-semibold rounded-full shadow-lg transition-colors">
              Load More
            </button>
          </div>
        </section>
      </main>
    </div>

    <footer class="p-4 sm:p-6 bg-purple-500 dark:bg-gray-900 text-white text-center text-sm rounded-b-xl shadow-inner">
      &copy; 2023 Finance Community. All rights reserved.
    </footer>
  </div>
</div>

Composant de lecteur vidéo - Aquarelle/Artistique, Océan/Bleu, Santé

Un composant de lecteur vidéo simple et réactif avec un style de conception aquarelle/artistique et une palette de couleurs océan/bleu, adapté aux applications médicales et de santé. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative bg-gradient-to-br from-blue-50 to-blue-200 dark:from-blue-950 dark:to-blue-800 p-4 sm:p-6 md:p-8 rounded-xl shadow-xl overflow-hidden group">
  <!-- Watercolor overlay effect -->
  <div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply dark:mix-blend-screen" style="background-image: url('data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\' viewBox=\'0 0 100 100\' xmlns=\'http://www.w3.org/2000/svg\'><defs><filter id=\'watercolorEffect\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02 0.05\' numOctaves=\'2\' result=\'noise\'/><feDiffuseLighting in=\'noise\' lightingColor=\'#ADD8E6\' surfaceScale=\'3\' result=\'light\'/><feBlend in=\'SourceGraphic\' in2=\'light\' mode=\'multiply\'/></filter></defs><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'url(%23gradient)\'/><radialGradient id=\'gradient\' cx=\'50%\' cy=\'50%\' r=\'50%\' fx=\'50%\' fy=\'50%\'><stop offset=\'0%\' stop-color=\'rgb(173,216,230)\'/><stop offset=\'100%\' stop-color=\'rgb(135,206,235)\'/></radialGradient><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' filter=\'url(%23watercolorEffect)\' opacity=\'0.5\'/></svg>'); background-size: cover;"></div>

  <div class="relative z-10 flex flex-col lg:flex-row items-center lg:items-start space-y-6 lg:space-y-0 lg:space-x-8">

    <!-- Video Player Area -->
    <div class="w-full lg:w-2/3 aspect-video bg-blue-300 dark:bg-blue-900 rounded-lg shadow-inner-lg overflow-hidden border border-blue-400 dark:border-blue-700 group-hover:scale-[1.01] transition-transform duration-300 ease-out">
      <iframe
        class="w-full h-full"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&controls=1&showinfo=0&rel=0&modestbranding=1"
        title="Medical Procedure Video"
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowfullscreen
      ></iframe>
    </div>

    <!-- Video Info / Description -->
    <div class="w-full lg:w-1/3 flex flex-col space-y-4 text-center lg:text-left">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 leading-tight tracking-tight drop-shadow-sm font-serif">
        <span class="block">Understanding</span>
        <span class="block">Respiratory Health</span>
      </h3>
      <p class="text-blue-700 dark:text-blue-200 text-base sm:text-lg leading-relaxed font-light">
        This insightful video provides a comprehensive overview of common respiratory conditions and preventative measures. Essential viewing for patients and caregivers.
      </p>
      <div class="flex justify-center lg:justify-start items-center space-x-3 pt-2">
        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Dr. Alex Chen" class="w-10 h-10 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md">
        <span class="text-blue-600 dark:text-blue-300 text-sm font-medium">Dr. Alex Chen, MD</span>
      </div>
      <div class="flex justify-center lg:justify-start pt-4">
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-lg text-white 
              bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 
              dark:from-sky-700 dark:to-blue-800 dark:hover:from-sky-800 dark:hover:to-blue-900
              focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950 transform hover:scale-105 transition-all duration-200 ease-in-out group">
          <svg class="-ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 10a8 8 0 1116 0 8 8 0 01-16 0zm8-7a1 1 0 00-.707-.293L4.293 8.293a1 1 0 000 1.414l5 5a1 1 0 001.414 0l5-5a1 1 0 000-1.414L10.707 2.707A1 1 0 0010 3z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 8V5a1 1 0 00-1-1H7a1 1 0 000 2h1v3a1 1 0 00-1 1H7a1 1 0 000 2h1v3a1 1 0 001 1h2a1 1 0 001-1v-3h1a1 1 0 000-2h-1V9h1a1 1 0 000-2h-1V5h1a1 1 0 000-2h-1z" clip-rule="evenodd" />
            <path d="M8.707 13.293a1 1 0 00-1.414 0L4.293 15.586a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 16H13a1 1 0 000-2H6.414l2.293-2.293a1 1 0 000-1.414z" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>

  <!-- Subtle brush stroke footer -->
  <div class="absolute bottom-0 left-0 right-0 h-6 bg-blue-300 dark:bg-blue-800 opacity-60 rounded-b-xl" style="mask-image: url('data:image/svg;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjUwIiB2aWV3Qm94PSIwIDAgMjAwIDUwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3My5vcmcvMjAwMC9zdmciPjxlbGxpcHNlIGN4PSIxMDQuNzcxIiBjeT0iMS41MDc2MSIgcnk9IjQ5LjUwNzYxIiByeD0iMTU5Ljc3MSIgc2tldyYobGRxdW87eClyZWNlbnQ9IjAuNjY5MTgzIiByb3RhdGU9Ii02LjM1MjY1IiBmaWxsPSIjRjk2RkYwIi8+PC9zdmc+'); mask-size: cover; mask-repeat: no-repeat; mask-position: bottom;"></div>
</div>

Composant du lecteur vidéo

Un composant de lecteur vidéo réactif conçu avec une esthétique inspirée du papier/de l’impression et une palette de couleurs complémentaire, adapté aux forums ou aux plates-formes communautaires. Inclut la prise en charge du mode sombre et du HTML sémantique.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 relative">
    <!-- Faux paper texture / watermark -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/notebook-dark.png')] opacity-10 dark:opacity-5 pointer-events-none z-0"></div>

    <div class="relative z-10 p-4 sm:p-6 lg:p-8">
      <!-- Header -->
      <div class="flex justify-between items-start mb-6 border-b pb-4 border-amber-200 dark:border-violet-600">
        <div>
          <h2 class="text-2xl sm:text-3xl font-bold text-amber-700 dark:text-amber-300 leading-tight">Community Highlight: 'The Future of AI'</h2>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">Dive into cutting-edge discussions.</p>
        </div>
        <div class="flex-shrink-0">
          <a href="#" class="text-violet-600 dark:text-violet-400 hover:underline text-sm sm:text-base">View Thread</a>
        </div>
      </div>

      <!-- Video Player Area -->
      <div class="relative w-full aspect-video bg-black rounded-lg overflow-hidden shadow-md mb-6 border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/800/450?random=1" alt="Video Thumbnail" class="w-full h-full object-cover" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
          <button class="p-4 sm:p-5 rounded-full bg-amber-500 text-white shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:bg-violet-700 dark:hover:bg-violet-800 dark:focus:ring-violet-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            <svg class="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 5v14l11-7z"></path>
            </svg>
            <span class="sr-only">Play Video</span>
          </button>
        </div>
      </div>

      <!-- Video Details and Actions -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div class="md:col-span-2">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-700 dark:text-amber-300 leading-snug mb-2">Unlocking the Potential of Generative AI</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
            Join leading experts as they explore the groundbreaking advancements and ethical considerations of generative artificial intelligence.
            This session delves into practical applications and future implications.
          </p>
        </div>
        <div class="md:col-span-1 flex flex-col items-start md:items-end">
          <div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-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>
            <span>Posted: <time datetime="2023-10-26">Oct 26, 2023</time></span>
          </div>
          <div class="flex items-center text-sm mb-4 text-gray-600 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-violet-600 dark:text-violet-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5zm10 4a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 100-2 1 1 0 000 2zm-5 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
            <span>Views: 1.2K</span>
          </div>
          <div class="flex space-x-2">
            <button class="flex items-center px-3 py-2 rounded-full text-white bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V8c0-1.1.9-2 2-2h4l2-2h6a2 2 0 012 2v3zM7 6a1 1 0 01-2 0V4a1 1 0 012 0h2a1 1 0 010 2H7z"></path></svg>
              Share
            </button>
            <button class="flex items-center px-3 py-2 rounded-full text-violet-700 bg-violet-100 hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-300 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
              <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 11-3 0v-6zM6 10.333v5.5H18V4.467a2 2 0 00-2-2H8a2 2 0 00-2 2v5.866zM10 6a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm-4 4a1 1 0 011-1h2a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
              Add to Watchlist
            </button>
          </div>
        </div>
      </div>

      <!-- Uploader Info -->
      <div class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-4 object-cover border-2 border-amber-400 dark:border-violet-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Uploader Avatar">
        <div>
          <p class="font-medium text-amber-800 dark:text-amber-200">Uploaded by: <a href="#" class="hover:underline text-amber-700 dark:text-amber-300">TechExplorer</a></p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Senior Member, AI Innovations Forum</p>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 40 41 42 43 44 ... 282

Catégories

Tous les composants