Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Boutons de partage social

Un ensemble de boutons de partage social dynamiques, inspirés de la 3D, adaptés aux sites Web de restauration et d’alimentation, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-800 rounded-xl shadow-2xl transition-all duration-300 w-full max-w-md mx-auto transform perspective-1000px">
    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-6 md:mb-8 text-gray-900 dark:text-white leading-tight drop-shadow-md">
      Share This Deliciousness!
    </h2>
    <p class="text-center text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 md:mb-10">
      Love our food? Spread the word and share with your friends!
    </p>

    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 md:gap-6 lg:gap-8">

      <!-- Facebook Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 active:from-blue-800 active:to-blue-950 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-blue-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-blue-500 rounded-full mb-3 shadow-md group-hover:bg-blue-400 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" 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.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Facebook</span>
      </a>

      <!-- Twitter Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-sky-500 to-sky-700 hover:from-sky-600 hover:to-sky-800 active:from-sky-700 active:to-sky-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-sky-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-sky-400 rounded-full mb-3 shadow-md group-hover:bg-sky-300 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21F6.681 12.23H17.84L9.363 2.25H2H8.82L0 12.23c2.173 2.923 5.066 5.029 8.324 5.029 6.786 0 11.964-6.462 11.964-11.493 0-.097-.007-.194-.015-.29M12.91 19.19H10.158L10.575 22h2.435Zm-4.965-7.468L2.25 2H4.912L12 11.168 19.088 2H22L15.932 10.963 22 22H19.088L11.83 12.832 4.912 22H2Z" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Twitter</span>
      </a>

      <!-- Instagram Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 active:from-purple-800 active:to-pink-800 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-purple-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600 rounded-full mb-3 shadow-md group-hover:from-yellow-300 group-hover:via-red-400 group-hover:to-purple-500 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 5.093c2.613 0 2.917.01 3.93.057 1.01.045 1.543.21 2.052.41 1.055.419 1.79.97 2.454 1.634.665.664 1.216 1.398 1.636 2.454.2.51.365 1.042.41 2.052.047 1.013.057 1.317.057 3.93s-.01 2.917-.057 3.93c-.045 1.01-.21 1.543-.41 2.052-.419 1.055-.97 1.79-1.634 2.454-.664.665-1.398 1.216-2.454 1.636-.51.2-.97.365-2.052.41-1.013.047-1.317.057-3.93.057s-2.917-.01-3.93-.057c-1.01-.045-1.543-.21-2.052-.41-1.055-.419-1.79-.97-2.454-1.634-.665-.664-1.216-1.398-1.636-2.454-.2-.51-.365-1.042-.41-2.052-.047-1.013-.057-1.317-.057-3.93s.01-2.917.057-3.93c.045-1.01.21-1.543.41-2.052.419-1.055.97-1.79 1.634-2.454.664-.665 1.398-1.216 2.454-1.636.51-.2.97-.365 2.052-.41 1.013-.047 1.317-.057 3.93-.057ZM12 3.55c-2.673 0-3.003.01-4.06.059-1.057.047-1.724.226-2.316.452-.693.266-1.265.632-1.83.997-.566.365-.96.793-1.34 1.232-.38.439-.706.892-1.026 1.32-.32.428-.588.79-.76 1.01-.17.22-.26.39-.28.47-.02.08-.03.11-.03.19-.01.07-.01.08-.02.13-.02.04-.02.04-.02.04-.01.01-.01.02-.02.03-.01.01-.01.02-.01.03-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.01-.01.01-.01.04-.01.02-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01s-.01-.01-.01-.01c-.01-.02-.01-.02-.01-.02-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.04s0-.04-.01-.01c-.01-.02-.01-.02-.01-.02-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01v-.01c-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c0-.01 0-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-1.06-.047-1.057-.226-1.724-.452-2.316-.266-.693-.632-1.265-.997-1.83-.365-.566-.793-.96-1.232-1.34-.439-.38-.892-.706-1.32-1.026-.428-.32-.79-.588-1.01-.76-.22-.17-.39-.26-.47-.28-.08-.02-.11-.03-.19-.03-.07-.01-.08-.01-.13-.02ZM12 18.026a6.026 6.026 0 1 0 0-12.052 6.026 6.026 0 0 0 0 12.052ZM12 7.625a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm5.4-.5a1.25 1.25 0 1 0-.003-2.5 1.25 1.25 0 0 0 .003 2.5Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Instagram</span>
      </a>

      <!-- WhatsApp Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 active:from-green-700 active:to-green-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-green-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-green-400 rounded-full mb-3 shadow-md group-hover:bg-green-300 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.001 2.001c-5.522 0-10 4.478-10 10 0 1.942.547 3.754 1.488 5.31L2 22l4.693-1.256c1.47 1.05 3.23 1.637 5.308 1.637C17.523 22 22 17.522 22 12.001c0-5.522-4.477-10-9.999-10.001Zm4.79 14.88c-.14-.23-1.04-.6-1.5-.83-1.03-.54-1.25-.62-1.77-.32-.52.3-1.02.94-1.24 1.05-.22.11-.44.12-.82.02-.38-.1-1.603-.59-3.047-1.84c-1.127-.96-1.895-2.12-2.115-2.5-.22-.38-.02-.59.1-.69.11-.1.24-.17.37-.28.13-.1.17-.18.23-.3.06-.11.03-.23-.01-.32-.04-.09-.37-.76-.51-.9-.15-.14-.12-.3-.08-.38.04-.08.13-.2.2-.28.08-.08.17-.18.24-.26.07-.08.13-.15.2-.23.07-.08.14-.15.2-.22.06-.07.13-.14.19-.2.06-.06.12-.13.19-.19.07-.06.13-.12.2-.18.07-.06.13-.12.2-.17.06-.05.12-.1.18-.16.06-.06.12-.11.18-.16.06-.05.12-.1.18-.15.06-.04.12-.09.18-.13.06-.04.12-.08.18-.12.06-.04.12-.07.18-.11.06-.03.12-.06.18-.08.06-.02.12-.04.18-.06.06-.02.12-.03.18-.04.06-.01.12-.02.18-.03.06-.01.12-.01.18-.01.06 0 .12 0 .18.01.06.01.12.01.18.02.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.01.18.02.06.01.12.01.18.01.06.01.12 0 .18 0 .06 0 .12-.01.18-.01.06-.01.12-.01.18-.02.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.04-.01.08-.01.12-.02.04-.01.08-.01.12-.01.04 0 .08-.01.12-.01.04-.01.08-.01.12-.01.04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08-.01.12-.01.04-.01.08-.01.12-.01.04-.01.08-.01.12-.01.04 0 .08-.01.12-.01l-.01.01h.01c-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01-.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01c-.01 0-.01 0-.01.01-.01 0-.01 0-.01.01-.01 0-.01 0-.01.01-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01c-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01C15.22 17.06 15.7 16.96 16.79 16.48c.17-.07.36-.14.53-.2.17-.06.35-.12.52-.18.16-.06.33-.11.5-.16.16-.05.33-.09.49-.13.16-.04.33-.07.49-.09.16-.03.33-.05.49-.06.16-.01.33-.02.49-.01.16 0 .33.01.49.02.16.01.32.02.48.04.16.02.32.03.48.05.16.03.32.04.48.07.16.02.32.05.48.07.16.03.32.05.48.08.16.03.32.06.48.08.16.02.32.05.48.07.16.02.32.05.48.07.15.02.31.05.47.07.16.02.31.05.47.07.16.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.46.06.16.02.31.04.47.06.15.02.31.03.46.06.15.02.31.03.46.05.15.02.31.03.46.05.16.02.31.03.46.05.15.02.3.03.46.05.15.02.3.03.45.05.15.02.3.03.45.05.15.02.3.03.45.04.15.01.3.02.45.04.15.01.3.02.45.03.15.01.3.02.45.03C17.5 16.7 17.26 16.92 16.79 16.88Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">WhatsApp</span>
      </a>

      <!-- Pinterest Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-red-600 to-red-800 hover:from-red-700 hover:to-red-900 active:from-red-800 active:to-red-950 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-red-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-red-500 rounded-full mb-3 shadow-md group-hover:bg-red-400 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.297 2.15c-.138.005-.26.06-.41.11L.004 9.176l5.733 5.733A.997.997 0 0 0 6 15c0 3.866 3.134 7 7 7 3.865 0 7-3.134 7-7 0-3.865-3.135-7-7-7-1.408 0-2.732.42-3.867 1.157L5.807 8.16a.996.996 0 0 0-.256-1.57C5.08 6.51 4.7 6.453 4.14 6.74l1.32-.871A.996.996 0 0 0 6 5c.42 0 .814.162 1.111.458.297.297.458.69.458 1.11V11c0 .083-.004.166-.013.248-.009.082-.02.164-.035.247-.014.083-.03.165-.049.248-.01.048-.017.094-.027.142-.01.047-.019.094-.029.14-.009.047-.017.094-.025.14-.008.047-.015.093-.023.14-.008.047-.014.093-.019.14-.005.046-.008.09-.011.135-.003.045-.005.09-.005.135 0 .274.113.524.293.707.18.18.43.293.707.293.275 0 .525-.113.708-.293.18-.182.292-.432.292-.707 0-.008 0-.016-.002-.024-.002-.008-.003-.016-.005-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.003-.016-.005-.024-.002-.008-.003-.016-.005-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.003-.008-.005-.016-.007-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.003-.008-.005-.016-.007-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024L11 15c0 1.933-1.611 3.5-3.5 3.5-.828 0-1.58-.29-2.164-.766.195 1.096 1.15 1.942 2.364 1.942C12.38 19.675 16.5 15.556 16.5 10.435c0-4.048-2.617-7.46-6.19-8.497.042-.004.09-.008.138-.008Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Pinterest</span>
      </a>

      <!-- Email Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 active:from-gray-700 active:to-gray-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-gray-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-gray-400 rounded-full mb-3 shadow-md group-hover:bg-gray-300 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M1.5 8.67v8.586a1.5 1.5 0 0 0 .546 1.176l7.854 5.236a2 2 0 0 0 2.378 0l7.854-5.236A1.5 1.5 0 0 0 22.5 17.256V8.67a1.5 1.5 0 0 0-.8-1.39l-8.44-4.22a2 2 0 0 0-1.878 0l-8.44 4.22A1.5 1.5 0 0 0 1.5 8.67ZM12 6.55L20.45 10.98a.75.75 0 0 1 .45 1.17l-.7 1.05-.71 1.066-6.59-4.394a2 2 0 0 0-2.378 0L3.25 14.18V8.67ZM18.51 18.06l-6.59-4.394a2 2 0 0 0-2.378 0l-6.59 4.394a1.5 1.5 0 0 0 .546 1.176l7.854 5.236a2 2 0 0 0 2.378 0l7.854-5.236a1.5 1.5 0 0 0 .546-1.176V8.67ZM12 12.001l7.854 5.236a1.5 1.5 0 0 0 .546 1.176L12 23.364l-8.4-5.604a1.5 1.5 0 0 0 .546-1.176Z" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Email</span>
      </a>

    </div>

    <p class="text-center text-sm md:text-md text-gray-400 dark:text-gray-500 mt-8 md:mt-12">
      &copy; 2023 Delicious Bites. All rights reserved.
    </p>
  </div>
</div>

<style>
  /* Adding a subtle 3D effect for buttons */
  .share-button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transform-style: preserve-3d;
    perspective: 800px;
    will-change: transform, box-shadow;
  }

  .share-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translateZ(-50px) translateY(-50%) translateX(-50%) rotateX(-15deg);
    filter: blur(25px);
    opacity: 0;
    transition: all 0.3s ease-out;
    pointer-events: none;
  }

  .share-button:hover::before {
    opacity: 1;
    transform: translateZ(-30px) translateY(-50%) translateX(-50%) rotateX(-10deg);
  }

  .share-button:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0.5px 1.5px rgba(0, 0, 0, 0.06);
  }

  .share-button .icon-wrapper {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease-out;
  }

  .share-button:hover .icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  }

  /* Dark mode specific 3D adjustments for better contrast/visibility */
  @media (prefers-color-scheme: dark) {
    .dark .share-button {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .dark .share-button:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button::before {
      background: rgba(255, 255, 255, 0.05);
    }

    .dark .share-button:hover::before {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  /* Keyframe for light pulse effect */
  @keyframes pulse-light {
    0% {
      opacity: 0.1;
    }
    50% {
      opacity: 0.4;
    }
    100% {
      opacity: 0.1;
    }
  }
  .animate-pulse-light {
    animation: pulse-light 2s infinite ease-in-out;
  }

</style>

Composant de pied de page - Réservation/Réservation - Dark Mode Candy

Un composant de pied de page complexe et réactif conçu pour les systèmes de réservation. Dispose d’une interface utilisateur en mode sombre avec des couleurs vives, de plusieurs liens de navigation, d’icônes de médias sociaux et d’un abonnement à la newsletter. Entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-gray-900 to-black text-pink-200 py-12 dark:from-black dark:to-gray-950">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-8">
      
      <!-- Company Info / Logo -->
      <div class="lg:col-span-2">
        <a href="#" class="flex items-center space-x-3 mb-4">
          <svg class="h-8 w-8 text-pink-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
          </svg>
          <span class="text-2xl font-extrabold text-pink-400 dark:text-pink-300">SweetBookings</span>
        </a>
        <p class="text-pink-300 text-sm leading-relaxed mb-6">
          Your premier destination for seamless reservations and unforgettable experiences. Book your sweet escape today!
        </p>
        <form class="mb-4">
          <label for="email-newsletter" class="block text-sm font-medium text-pink-300 mb-2">Stay Sweet, Get Updates!</label>
          <div class="flex rounded-lg shadow-sm overflow-hidden">
            <input type="email" id="email-newsletter" name="email" placeholder="Your email address" class="flex-1 min-w-0 px-4 py-2 rounded-l-lg border-none bg-gray-800 text-pink-100 placeholder-pink-400 focus:ring-2 focus:ring-mint-400 focus:border-transparent">
            <button type="submit" class="px-5 py-2 bg-mint-500 hover:bg-mint-600 text-gray-900 font-semibold rounded-r-lg transition duration-300">
              Subscribe
            </button>
          </div>
        </form>
      </div>

      <!-- Quick Links -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Quick Links</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Book Now</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Manage Booking</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Gift Vouchers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Special Offers</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Destinations</a></li>
        </ul>
      </div>

      <!-- Support -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Help Center</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">FAQ</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Contact Us</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-pink-300 hover:text-pink-500 transition duration-200 text-sm">Terms of Service</a></li>
        </ul>
      </div>

      <!-- Contact Info -->
      <div>
        <h3 class="text-lg font-bold text-pink-400 mb-4 dark:text-pink-300">Get in Touch</h3>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Address:</strong> 123 Candy Lane, Sweet City, SC 90210
        </p>
        <p class="text-pink-300 text-sm mb-3">
          <strong class="block">Phone:</strong> <a href="tel:+1234567890" class="hover:text-pink-500 transition duration-200">(123) 456-7890</a>
        </p>
        <p class="text-pink-300 text-sm mb-4">
          <strong class="block">Email:</strong> <a href="mailto:info@sweetbookings.com" class="hover:text-pink-500 transition duration-200">info@sweetbookings.com</a>
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-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.877V14.89H8.79V12h1.648V9.789c0-1.662.983-2.615 2.535-2.615 1.194 0 2.306.213 2.306.213V10.2H14.15c-.825 0-1.082.515-1.082 1.053V12h2.24l-.356 2.89H13.068V22H12C6.477 22 2 17.523 2 12z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.843.038 1.488.156 2.075.356.65.23 1.157.567 1.626 1.036.469.469.805.976 1.035 1.622.2.586.318 1.231.358 2.076.046 1.013.048 1.367.048 3.797s-.002 2.43-.048 3.797c-.04.843-.158 1.488-.358 2.075-.23 1.157-.567 1.157-1.036 1.626a4.904 4.904 0 01-1.622 1.035c-.586.2-1.23.318-2.076.358-1.013.045-1.367.048-3.797.048s-2.43-.002-3.797-.048c-.843-.04-1.488-.158-2.075-.358a4.904 4.904 0 01-1.626-1.036c-.469-.469-.805-.976-1.035-1.622-.2-.586-.317-1.23-.357-2.076-.046-1.013-.048-1.367-.048-3.797s.002-2.43.048-3.797c.04-.843.158-1.488.358-2.075a4.904 4.904 0 011.036-1.626c.469-.469.976-.805 1.622-1.035.586-.2 1.23-.317 2.076-.357C9.882 1.998 10.236 2 12.315 2zm0 2.15c-2.3 0-2.673.011-3.619.055-.783.036-1.202.166-1.485.276a2.022 2.022 0 00-.734.545 2.022 2.022 0 00-.546.733c-.11.283-.24.702-.276 1.485-.044.946-.055 1.319-.055 3.619s.011 2.673.055 3.619c.036.783.166 1.202.276 1.485a2.022 2.022 0 00.545.734 2.022 2.022 0 00.733.546c.283.11.702.24 1.485.276.946.044 1.319.055 3.619.055s2.673-.011 3.619-.055c.783-.036 1.202-.166 1.485-.276a2.022 2.022 0 00.734-.545 2.022 2.022 0 00.546-.733c.11-.283.24-.702.276-1.485.044-.946.055-1.319.055-3.619s-.011-2.673-.055-3.619c-.036-.783-.166-1.202-.276-1.485a2.022 2.022 0 00-.545-.734 2.022 2.022 0 00-.733-.546c-.283-.11-.702-.24-1.485-.276-.946-.044-1.319-.055-3.619-.055zM12.315 6.844v-1.161c0-.64-.52-.962-1.16-.962-.64 0-.962.52-.962 1.161v1.161h2.322zM12.315 17.16c-2.674 0-4.846-2.172-4.846-4.846s2.172-4.846 4.846-4.846 4.846 2.172 4.846 4.846-2.172 4.846-4.846 4.846zm0-8.528c-2.036 0-3.682 1.646-3.682 3.682s1.646 3.682 3.682 3.682 3.682-1.646 3.682-3.682-1.646-3.682-3.682-3.682zm4.32-.495c-.328 0-.594.266-.594.594s.266.594.594.594.594-.266.594-.594-.266-.594-.594-.594z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c4.76 0 7.8-3.95 7.8-7.8s-3.04-7.8-7.8-7.8c-4.3 0-7.8 3.5-7.8 7.8S3.99 20.35 8.29 20.35zm-2.88-4.22c.32.14.7.23 1.1.28.32.04.64.06.97.06.49 0 .97-.04 1.4-.11.45-.07.8-.16 1.13-.28v-2.31c-.3.08-.63.15-.98.2-.35.05-.7.08-1.07.08-.66 0-1.28-.15-1.84-.44-.57-.29-1.04-.69-1.42-1.2C3.51 9.49 3.32 8.76 3.32 7.96c0-.98.3-1.8.89-2.45.6-.66 1.4-.99 2.4-.99.3 0 .58.03.86.08.28.05.54.12.78.22l-2.07 2.07c-.12.12-.22.25-.3.4l-.1.17c-.32.55-.48 1.18-.48 1.88 0 .57.1.97.3 1.2.2.24.46.36.78.36.26 0 .5-.05.7-.15l.39-.17.39-.17c.5-.23.94-.56 1.32-.98.38-.42.66-.88.84-1.38.18-.5.27-.99.27-1.47 0-.58-.1-.97-.3-1.18-.2-.22-.45-.33-.76-.33-.16 0-.32.02-.48.05-.16.03-.3.08-.42.15l-1.05 1.05c-.12.12-.25.22-.4.3-.22.12-.4.18-.54.18-.2 0-.37-.03-.5-.09-.12-.06-.2-.14-.24-.24-.04-.1-.06-.18-.06-.24 0-.1.02-.18.06-.24.04-.06.1-.12.18-.18l.2-.2c.1-.1.18-.16.24-.18.06-.02.1-.02.12-.02.04 0 .08-.01.12-.01.04-.01.07-.01.09-.01l.24.01c.2.02.4.08.6.18.2.1.4.22.6.38.2.16.4.34.6.54.2.2.4.42.6.66.2.24.4.5.6.78.2.28.4.58.6.9.2.32.4.66.6 1.02.2.36.36.72.48 1.08.12.36.18.7.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1-1.02 0-1.84-.37-2.46-1.11-.62-.74-.93-1.63-.93-2.67 0-.49.09-.96.26-1.4-.04 0-.08-.01-.12-.01-.04 0-.08 0-.12 0-.04 0-.08 0-.12.01-.04.01-.08.01-.12.02l-.24.02c-.2.02-.4.08-.6.18-.2.1-.4.22-.6.38-.2.16-.4.34-.6.54-.2.2-.4.42-.6.66-.2.24-.4.5-.6.78-.2.28-.4.58-.6.9-.2.32-.4.66-.6 1.02-.2.36-.36.72-.48 1.08-.12.36-.18.7-.18 1.02-.01.99-.33 1.8-.95 2.43-.61.63-1.43 1-2.46 1z"/>
            </svg>
          </a>
          <a href="#" class="text-pink-300 hover:text-pink-500 dark:hover:text-pink-400 transition duration-200">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M16.98 0H7.02C4.332 0 2.181 2.15 2.181 4.838v14.324C2.181 21.85 4.332 24 7.02 24h9.96c2.688 0 4.838-2.15 4.838-4.838V4.838C21.818 2.15 19.668 0 16.98 0zm-4.998 17.5c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5 4.5 2.015 4.5 4.5c0 2.485-2.015 4.5-4.5 4.5zm5.5-12.72c-.655 0-1.189-.533-1.189-1.189s.534-1.189 1.189-1.189 1.189.533 1.189 1.189-.534 1.189-1.189 1.189z"/>
              <circle cx="12" cy="13" r="3.5"/>
            </svg>
          </a>
        </div>
      </div>

    </div>

    <div class="mt-12 border-t border-gray-800 pt-8 text-center">
      <p class="text-pink-300 text-sm">&copy; 2023 SweetBookings. All rights reserved. Designed with <span class="text-pink-500">♥</span> for sweet reservations.</p>
    </div>
  </div>
</footer>

Composant de la liste de souhaits

Un composant de liste de souhaits simple et réactif adapté aux plateformes de rencontres ou de connexion sociale, doté d’une esthétique de design 3D avec des tons bleus d’entreprise et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-blue-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform perspective-1000 rotateY-3 transition-transform duration-500 ease-in-out hover:rotateY-0 group">
    <!-- Front face with shadow for 3D effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-blue-500 to-blue-700 dark:from-blue-700 dark:via-blue-900 dark:to-blue-950 opacity-10 group-hover:opacity-0 transition-opacity duration-300 ease-in-out rounded-xl origin-bottom-right rotate-3 transform translateZ-neg10 rotate-y-3">
    </div>
    <div class="relative z-10 p-6 sm:p-8 rounded-xl">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-200">Your Wishlist</h3>
        <button class="p-2 rounded-full bg-blue-100 hover:bg-blue-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-blue-600 dark:text-gray-300 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
        </button>
      </div>

      <ul class="space-y-4">
        <!-- Wishlist Item 1 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">Jane Doe</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Loves hiking & coffee</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>

        <!-- Wishlist Item 2 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">John Smith</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Gamer & foodie</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>

        <!-- Wishlist Item 3 -->
        <li class="flex items-center space-x-4 p-3 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transform hover:scale-105 transition duration-300 ease-in-out border border-blue-200 dark:border-gray-600 group">
          <div class="relative w-16 h-16 rounded-full overflow-hidden flex-shrink-0 border-2 border-blue-400 dark:border-blue-500">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full object-cover transform scale-105 group-hover:scale-110 transition duration-300 ease-in-out">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-300 via-transparent to-transparent opacity-20 group-hover:opacity-0 transition-opacity duration-300"></div>
          </div>
          <div class="flex-1">
            <h4 class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Brown</h4>
            <p class="text-sm text-gray-500 dark:text-gray-400">Artist & Traveler</p>
          </div>
          <button class="text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 transition duration-300 ease-in-out p-1 rounded-full hover:bg-red-100 dark:hover:bg-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </li>
      </ul>
      
      <div class="mt-6 text-center">
        <button class="w-full py-3 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-bold rounded-lg shadow-md hover:shadow-lg transform active:scale-95 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
          Suggest New Matches
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for basic 3D transform, consider using Tailwind's arbitrary values or JIT */
  .perspective-1000 {
    perspective: 1000px;
  }
  .rotateY-3 {
    transform: rotateY(3deg);
  }
  .rotateY-0 {
    transform: rotateY(0deg);
  }
  .translateZ-neg10 {
    transform: translateZ(-10px);
  }
</style>

Composant Art Déco Like/Reaction Buttons

Un ensemble simple et réactif de boutons J’aime/réaction avec une esthétique Art Déco, adapté aux applications sportives/fitness. Dispose de neutres chauds et d’une prise en charge du mode sombre.

Ouvrir Aperçu

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

  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl border-t-4 border-b-4 border-amber-600 dark:border-amber-500 w-full max-w-sm mx-auto transition-colors duration-300">
    <div class="flex justify-around items-center border-t border-b border-gray-300 dark:border-gray-700 py-4 mb-4 relative overflow-hidden">
      <!-- Art Deco Pattern Overlay -->
      <div class="absolute inset-0 pointer-events-none opacity-5 dark:opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <rect x="0" y="0" width="100" height="100" fill="none" />
          <path d="M0 0 L10 10 L0 20 Z M100 0 L90 10 L100 20 Z M0 100 L10 90 L0 80 Z M100 100 L90 90 L100 80 Z M50 0 L40 10 L60 10 L50 0 Z M50 100 L40 90 L60 90 L50 100 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
          <path d="M20 5 L25 0 L30 5 Z M70 5 L75 0 L80 5 Z M20 95 L25 100 L30 95 Z M70 95 L75 100 L80 95 Z M5 20 L0 25 L5 30 Z M95 20 L100 25 L95 30 Z M5 70 L0 75 L5 80 Z M95 70 L100 75 L95 80 Z" fill="currentColor" class="text-gray-400 dark:text-gray-600"/>
        </svg>
      </div>

      <button aria-label="Like Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:scale-110 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Like</span>
      </button>

      <button aria-label="Clap Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:rotate-12 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M15 1H9c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-1 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm-6 8h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2zm12 0h-4c-1.11 0-2 .89-2 2v3c0 1.11.89 2 2 2h4c1.11 0 2-.89 2-2v-3c0-1.11-.89-2-2-2z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Clap</span>
      </button>

      <button aria-label="Boom Reaction" class="flex flex-col items-center group focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 rounded-md p-2 relative z-10">
        <svg class="w-8 h-8 md:w-10 md:h-10 text-gray-700 dark:text-gray-300 group-hover:text-amber-600 dark:group-hover:text-amber-400 transform group-hover:-translate-y-1 transition-transform duration-200 ease-in-out" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.9L9.1 16H8a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h1.1L11 6.1H8V4h8v2.1l-2 3.8h1c.55 0 1 .45 1 1v2c0 .55-.45 1-1 1h-1.1l2 3.8H16v2h-4z"/>
        </svg>
        <span class="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 font-medium group-hover:text-amber-700 dark:group-hover:text-amber-300 transition-colors duration-200">Boom!</span>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300">
      <p class="text-lg font-semibold tracking-wider uppercase text-amber-800 dark:text-amber-400">Show Your Support!</p>
      <p class="text-sm mt-2 text-gray-500 dark:text-gray-400">Engage with our latest updates and achievements.</p>
    </div>
  </div>

</div>

Composant Suivre le bouton

Un composant complexe de bouton « Suivre » avec des micro-interactions, une palette de couleurs sépia/marron, un design réactif et une prise en charge du mode sombre, adapté aux plateformes de blog/contenu.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-amber-100 dark:bg-stone-800 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="relative h-24 bg-gradient-to-r from-amber-300 to-amber-500 dark:from-stone-700 dark:to-stone-900">
      <img class="absolute inset-0 w-full h-full object-cover opacity-70" src="https://picsum.photos/400/200?random=1" alt="Background">
    </div>
    <div class="relative px-4 pb-4 -mt-12 text-center">
      <div class="relative inline-block border-4 border-amber-100 dark:border-stone-800 rounded-full overflow-hidden shadow-lg transition-all duration-300 hover:scale-105">
        <img class="w-24 h-24 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Avatar">
      </div>
      <h3 class="mt-3 text-lg font-semibold text-amber-900 dark:text-amber-100">Jane Doe</h3>
      <p class="text-sm text-amber-700 dark:text-stone-300">@janedoe_writes</p>
      <p class="mt-2 text-sm text-amber-800 dark:text-stone-400 leading-snug">Passionate storyteller, weaving tales of adventure and discovery. Follow along for daily insights!</p>

      <div class="mt-5 flex justify-center space-x-3">
        <div class="relative group">
          <button class="peer group relative flex items-center justify-center px-5 py-2 text-base font-medium text-amber-50 dark:text-amber-100 bg-amber-600 dark:bg-stone-700 rounded-full shadow-md hover:bg-amber-700 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800 transform transition-all duration-200 ease-in-out active:scale-95 overflow-hidden has-[input:checked]:bg-amber-800 dark:has-[input:checked]:bg-stone-900 has-[input:checked]:ring-amber-700 has-[input:checked]:shadow-inner">
            <input type="checkbox" id="follow-toggle" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer peer" aria-label="Toggle Follow">
            <span class="relative z-10 block transition-transform duration-300 ease-in-out peer-checked:-translate-y-full peer-checked:opacity-0">Follow</span>
            <span class="relative z-10 block absolute top-full left-0 w-full transition-transform duration-300 ease-in-out peer-checked:translate-y-0 peer-checked:opacity-100 opacity-0">Following</span>
            <svg class="absolute z-10 w-5 h-5 left-1/2 top-1/2 -ml-2.5 -mt-2.5 text-amber-50 dark:text-amber-100 transition-all duration-300 ease-in-out transform scale-0 opacity-0 peer-checked:scale-100 peer-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-amber-800 dark:bg-stone-900 text-amber-50 dark:text-stone-200 text-xs rounded-lg shadow-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:-translate-y-full transition-all duration-300">
            Click to follow!
            <div class="absolute left-1/2 translate-x-[-50%] top-full w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-amber-800 dark:border-t-stone-900"></div>
          </div>
        </div>

        <button class="group relative px-4 py-2 text-base text-amber-800 dark:text-amber-100 bg-amber-200 dark:bg-stone-700 rounded-full shadow-md hover:bg-amber-300 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800 transform transition-all duration-200 ease-in-out active:scale-95 overflow-hidden">
          <span class="relative z-10">Message</span>
          <div class="absolute inset-0 bg-amber-400 dark:bg-stone-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
        </button>
      </div>

      <div class="mt-6 flex justify-around text-center border-t border-amber-200 dark:border-stone-700 pt-4">
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">2.5K</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Followers</p>
        </div>
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">1.2K</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Following</p>
        </div>
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">45</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Posts</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription complexe et réactif avec un schéma de couleurs dégradé forêt/vert, des transitions fluides et une prise en charge du mode sombre, adapté aux plates-formes éducatives.

Ouvrir Aperçu

                <div class="min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 transition-all duration-500 ease-in-out">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden md:flex transform transition-all duration-500 ease-in-out hover:shadow-2xl">

    <!-- Left Section: Image / Branding -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center items-center text-center bg-gradient-to-br from-green-400 to-emerald-600 dark:from-green-700 dark:to-emerald-900 text-white relative overflow-hidden">
      <div class="absolute inset-0 opacity-10 dark:opacity-5 transition-opacity duration-500" style="background-image: url('https://picsum.photos/600/800?random=1'); background-size: cover; background-position: center;"></div>
      <div class="relative z-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 leading-tight drop-shadow-lg">Join Our Learning Journey</h2>
        <p class="text-base sm:text-lg lg:text-xl font-light mb-6 opacity-90 drop-shadow">Unlock a world of knowledge and connect with expert instructors. Start your adventure today!</p>
        <div class="space-y-4">
          <div class="flex items-center justify-center space-x-3">
            <svg class="w-7 h-7 text-white" 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 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            <span class="text-lg font-medium">Interactive Courses</span>
          </div>
          <div class="flex items-center justify-center space-x-3">
            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm12 1v10H4V5h12zm-3 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
            <span class="text-lg font-medium">Expert Instructors</span>
          </div>
          <div class="flex items-center justify-center space-x-3">
            <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm0 2h8v12H6V4zm2 3.5a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1zm1 5.5a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
            <span class="text-lg font-medium">Certification Programs</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Section: Registration Form -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center transform transition-colors duration-500">
        Create Your Account
      </h2>
      <form class="space-y-6">

        <!-- Full Name -->
        <div>
          <label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Full Name</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"></path></svg>
            </div>
            <input type="text" id="full-name" name="full-name" placeholder="John Doe" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Email Address -->
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Email Address</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
            </div>
            <input type="email" id="email" name="email" placeholder="john.doe@example.com" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Password -->
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Password</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="password" id="password" name="password" placeholder="Minimum 8 characters" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Confirm Password -->
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-500">Confirm Password</label>
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path></svg>
            </div>
            <input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password" class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-600 focus:border-transparent dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-300 ease-in-out" required>
          </div>
        </div>

        <!-- Terms & Privacy Checkbox -->
        <div class="flex items-center">
          <input id="terms-privacy" name="terms-privacy" type="checkbox" class="h-4 w-4 text-green-600 dark:text-green-500 focus:ring-green-500 dark:focus:ring-green-400 border-gray-300 dark:border-gray-600 rounded transition-all duration-300" required>
          <label for="terms-privacy" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-500">
            I agree to the <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Terms of Service</a> and <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Privacy Policy</a>.
          </label>
        </div>

        <!-- Submit Button -->
        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-800 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 active:scale-95">
            Register Now
          </button>
        </div>

        <!-- Social Login Options -->
        <div class="relative py-4">
          <div class="absolute inset-0 flex items-center">
            <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 transition-colors duration-500">Or continue with</span>
          </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button type="button" class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M24 9.5c3.27 0 5.66.97 7.76 2.94l6.19-6.19C34.73 2.92 29.8 1 24 1 15.34 1 8.08 5.76 5.09 13.06l6.6 5.15C13.23 13.9 18.06 9.5 24 9.5z" fill="#EA4335"/>
              <path d="M13.23 18.21l-6.6-5.15C5.76 15.92 5 19.8 5 24c0 4.2.76 8.08 2.06 11.09l6.6-5.15C13.9 27.06 13.23 24 13.23 24s0 0 0 0z" fill="#FBBC04"/>
              <path d="M24 38.5c-5.94 0-10.77-4.4-12.27-10.29l-6.6 5.15C8.08 42.24 15.34 47 24 47c7.58 0 13.56-2.92 18.01-7.86l-6.19-6.19C29.66 37.03 26.73 38.5 24 38.5z" fill="#34A853"/>
              <path d="M42.01 24c0-1.74-.15-3.39-.43-5H24v10h11.23c-.53 2.87-2.32 5.25-4.88 6.84L38.01 39C40.68 36.87 42.01 33.4 42.01 24z" fill="#4285F4"/>
            </svg>
            Google
          </button>
          <button type="button" class="w-full flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-green-600 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" 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.33V22.11C18.342 21.364 22 17.114 22 12z" clip-rule="evenodd" />
            </svg>
            Facebook
          </button>
        </div>

        <!-- Already have an account -->
        <div class="text-center mt-6">
          <p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-500">
            Already have an account? <a href="#" class="font-medium text-green-600 dark:text-green-500 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-300">Sign In</a>
          </p>
        </div>

      </form>
    </div>

  </div>
</div>

Industrial_Travel_Shopping_Cart

Un composant de panier d’achat complexe et réactif avec une esthétique de design industriel et une palette de couleurs vert forêt, adapté aux sites de réservation de voyages et de tourisme. Inclut la prise en charge du mode sombre, des éléments d’interface riches et du HTML sémantique.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-200 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-r from-emerald-700 to-green-800 dark:from-green-900 dark:to-emerald-900 text-white border-b-4 border-emerald-900 dark:border-emerald-700">
      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold tracking-wide drop-shadow-lg">Your Travel Cart</h1>
      <p class="mt-2 text-md sm:text-lg text-green-100">Review your selected adventures before checkout.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-4 sm:p-6 lg:p-8">
      <!-- Cart Items Section -->
      <div class="lg:col-span-2 space-y-6">

        <!-- Item 1 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/300/200?random=1" alt="Machu Picchu Tour" class="w-full sm:w-32 h-24 object-cover rounded-lg mr-0 sm:mr-4 mb-4 sm:mb-0 border-2 border-emerald-600 dark:border-emerald-400 group-hover:scale-105 transition-transform duration-300">
          <div class="flex-1">
            <h2 class="text-lg sm:text-xl font-bold text-emerald-800 dark:text-emerald-300">Machu Picchu Adventure (3 Days)</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300">Date: Oct 26 - Oct 29, 2024</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Participants: 2 Adults</p>
            <div class="flex items-center mt-2">
              <span class="text-lg font-semibold text-gray-800 dark:text-white">$1,200.00</span>
              <div class="flex ml-auto items-center space-x-2">
                <label for="qty-1" class="sr-only">Quantity</label>
                <input type="number" id="qty-1" value="1" min="1" class="w-16 text-center border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <button class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-500 transition-colors duration-200" aria-label="Remove item">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>
          <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200" aria-label="More options">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
        </div>

        <!-- Item 2 -->
        <div class="flex flex-col sm:flex-row items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 relative group">
          <img src="https://picsum.photos/300/200?random=2" alt="Amazon River Cruise" class="w-full sm:w-32 h-24 object-cover rounded-lg mr-0 sm:mr-4 mb-4 sm:mb-0 border-2 border-emerald-600 dark:border-emerald-400 group-hover:scale-105 transition-transform duration-300">
          <div class="flex-1">
            <h2 class="text-lg sm:text-xl font-bold text-emerald-800 dark:text-emerald-300">Amazon River Cruise (Night)</h2>
            <p class="text-sm text-gray-600 dark:text-gray-300">Date: Nov 15, 2024</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Participants: 1 Adult</p>
            <div class="flex items-center mt-2">
              <span class="text-lg font-semibold text-gray-800 dark:text-white">$350.00</span>
              <div class="flex ml-auto items-center space-x-2">
                <label for="qty-2" class="sr-only">Quantity</label>
                <input type="number" id="qty-2" value="1" min="1" class="w-16 text-center border border-gray-300 dark:border-gray-600 rounded-md py-1 px-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <button class="p-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-500 transition-colors duration-200" aria-label="Remove item">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"></path></svg>
                </button>
              </div>
            </div>
          </div>
          <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors duration-200" aria-label="More options">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
          </button>
        </div>

        <!-- Add more items, perhaps a placeholder for empty state -->
        <div class="text-center p-4 text-gray-500 dark:text-gray-400 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg">
          <p class="text-sm">Want to add more adventures? <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Explore our tours</a></p>
        </div>

      </div>

      <!-- Order Summary Section -->
      <div class="lg:col-span-1 bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600 h-fit sticky top-4">
        <h2 class="text-xl sm:text-2xl font-bold text-emerald-800 dark:text-emerald-300 mb-4 border-b pb-2 border-gray-300 dark:border-gray-600">Order Summary</h2>
        <div class="space-y-4 text-gray-700 dark:text-gray-200">
          <div class="flex justify-between items-center">
            <span>Subtotal (2 items)</span>
            <span class="font-semibold">$1,550.00</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Estimated Taxes</span>
            <span class="font-semibold">$77.50</span>
          </div>
          <div class="flex justify-between items-center">
            <span>Booking Fees</span>
            <span class="font-semibold">$25.00</span>
          </div>
          <div class="border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
            <div class="flex justify-between items-center text-lg font-bold text-emerald-800 dark:text-emerald-300">
              <span>Order Total</span>
              <span>$1,652.50</span>
            </div>
          </div>
        </div>

        <div class="mt-6">
          <label for="promo-code" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Have a promo code?</label>
          <div class="flex">
            <input type="text" id="promo-code" placeholder="SUMMER20" class="flex-grow border border-gray-300 dark:border-gray-600 rounded-l-md p-2 focus:ring-emerald-500 focus:border-emerald-500 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200">
            <button class="bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-800 text-white font-bold py-2 px-4 rounded-r-md transition duration-200 ease-in-out">
              Apply
            </button>
          </div>
        </div>

        <button class="mt-6 w-full bg-emerald-700 hover:bg-emerald-800 dark:bg-emerald-800 dark:hover:bg-emerald-900 text-white font-extrabold py-3 rounded-lg text-lg tracking-wide shadow-lg transform hover:scale-105 transition duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-500 focus:ring-opacity-50">
          Proceed to Checkout
          <svg class="inline-block ml-2 w-5 h-5 -mt-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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>

        <div class="mt-6 text-xs text-gray-500 dark:text-gray-400 text-center">
          <p>By proceeding, you agree to our <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Terms of Service</a> and <a href="#" class="text-emerald-600 dark:text-emerald-400 hover:underline">Privacy Policy</a>.</p>
        </div>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Secure payment processed by:</p>
          <img src="https://picsum.photos/120/40?grayscale&random=3" alt="Payment Provider Logo" class="mx-auto rounded-md filter invert dark:filter-none opacity-80 dark:opacity-60">
        </div>

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

Composant de curseur de carrousel

Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs bonbons/doux, des micro-interactions et une prise en charge du mode sombre, adapté aux sites Web d’événements et de conférences.

Ouvrir Aperçu

                <div class="relative w-full overflow-hidden bg-pink-100 dark:bg-gray-900 group">
  <!-- Carousel Wrapper - This will ideally be controlled by JS for actual sliding, but for pure HTML, we show multiple states -->
  <div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">

    <!-- Slide 1 -->
    <div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
      <div class="w-full md:w-1/2 lg:w-2/5">
        <img src="https://picsum.photos/600/400?random=1" alt="Event Highlight" class="rounded-2xl shadow-lg ring-4 ring-pink-300 dark:ring-pink-700 group-hover:ring-pink-400 dark:group-hover:ring-pink-600 transition-all duration-300 transform group-hover:scale-105">
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 lg:mb-6 leading-tight group-hover:text-pink-700 dark:group-hover:text-pink-300 transition-colors duration-300">
          Sweet Dreams Conference 2024
        </h2>
        <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
          Dive into the world of confectionery arts and business. Join us for inspiring talks, workshops, and networking opportunities.
        </p>
        <div class="flex flex-wrap gap-4 justify-center md:justify-start">
          <a href="#" class="bg-pink-500 hover:bg-pink-600 active:bg-pink-700 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800">
            Register Now
          </a>
          <a href="#" class="bg-mint-400 hover:bg-mint-500 active:bg-mint-600 dark:bg-mint-500 dark:hover:bg-mint-600 dark:active:bg-mint-700 text-gray-800 dark:text-gray-200 font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
            Learn More
          </a>
        </div>
        <div class="mt-8 flex flex-wrap justify-center md:justify-start -space-x-2 overflow-hidden">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Attendee 2">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Attendee 3">
          <span class="flex h-10 w-10 rounded-full bg-pink-300 dark:bg-pink-700 items-center justify-center text-sm font-medium text-pink-700 dark:text-pink-300 ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125">+99</span>
        </div>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
      <div class="w-full md:w-1/2 lg:w-2/5 order-2 md:order-1">
        <img src="https://picsum.photos/600/400?random=2" alt="Speaker Panel" class="rounded-2xl shadow-lg ring-4 ring-mint-300 dark:ring-mint-700 group-hover:ring-mint-400 dark:group-hover:ring-mint-600 transition-all duration-300 transform group-hover:scale-105">
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left order-1 md:order-2">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-mint-600 dark:text-mint-400 mb-4 lg:mb-6 leading-tight group-hover:text-mint-700 dark:group-hover:text-mint-300 transition-colors duration-300">
          Meet Our Star Speakers
        </h2>
        <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
          Learn from the industry's best! Our lineup features world-renowned chocolatiers and confectionary entrepreneurs.
        </p>
        <ul class="list-none p-0 space-y-3 mb-6 lg:mb-8 text-gray-700 dark:text-gray-300">
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 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="M5 13l4 4L19 7"></path></svg>
            Chef Isabella "Sugar Plum" Rossi
          </li>
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 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="M5 13l4 4L19 7"></path></svg>
            Dr. Alan "Cocoa" Bean
          </li>
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 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="M5 13l4 4L19 7"></path></svg>
            Ms. Candice "Candy" Cane, CEO
          </li>
        </ul>
        <a href="#" class="bg-mint-500 hover:bg-mint-600 active:bg-mint-700 dark:bg-mint-600 dark:hover:bg-mint-700 dark:active:bg-mint-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
          View All Speakers
        </a>
      </div>
    </div>

  </div>

  <!-- Navigation Dots (Pure HTML, so they just stand for visual indication) -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
    <span class="block w-3 h-3 rounded-full bg-pink-500 dark:bg-pink-400 ring-2 ring-pink-700 dark:ring-pink-200 transform transition-all duration-300 group-hover:scale-125"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125 hidden sm:block"></span>
  </div>

  <!-- Navigation Arrows (Pure HTML, so they just stand for visual indication) -->
  <button class="absolute top-1/2 left-4 md:left-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700 
                 text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
  </button>
  <button class="absolute top-1/2 right-4 md:right-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700 
                 text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </button>

</div>


<style>
  /* This is just to illustrate the effect for a single-page HTML. */
  /* In a real scenario, the 'transform: translateX' on .flex would be controlled by JavaScript. */
  /* If you want to show a specific slide, you'd apply a style like transform: translateX(-100%) for the second slide */
  /* Or, you can just duplicate the carousel wrapper and show one slide at a time for static display */
  /* For this specific requirement, I am demonstrating two possible slide contents within the single carousel wrapper div, */
  /* implying that JS would handle the `translateX` for actual sliding. */
  /* The 'group' utility on the parent div is used for hover effects that propagate to children. */

  :root {
    --color-mint-400: #99F6E4; /* Tailwind mint-400 */
    --color-mint-500: #4FC0B2; 
    --color-mint-600: #2BB6AB;
    --color-mint-700: #1B8C86; /* Tailwind mint-700 */
  }

  .bg-mint-400 { background-color: var(--color-mint-400); }
  .hover\:bg-mint-500:hover { background-color: var(--color-mint-500); }
  .active\:bg-mint-600:active { background-color: var(--color-mint-600); }
  .dark\:bg-mint-500 { background-color: var(--color-mint-500); }
  .dark\:hover\:bg-mint-600:hover { background-color: var(--color-mint-600); }
  .dark\:active\:bg-mint-700:active { background-color: var(--color-mint-700); }

  .focus\:ring-mint-300:focus { box-shadow: 0 0 0 4px var(--color-mint-400) !important; }
  .dark\:focus\:ring-mint-800:focus { box-shadow: 0 0 0 4px var(--color-mint-700) !important; }

  .text-mint-600 { color: var(--color-mint-600); }
  .dark\:text-mint-400 { color: var(--color-mint-400); }
  .group-hover\:text-mint-700:hover { color: var(--color-mint-700); }
  .dark\:group-hover\:text-mint-300:hover { color: var(--color-mint-400); }

  .ring-mint-300 { border-color: var(--color-mint-400); }
  .dark\:ring-mint-700 { border-color: var(--color-mint-700); }
  .group-hover\:ring-mint-400:hover { border-color: var(--color-mint-500); }
  .dark\:group-hover\:ring-mint-600:hover { border-color: var(--color-mint-600); }
  .text-mint-500 { color: var(--color-mint-500); }
  .dark\:text-mint-400 { color: var(--color-mint-400); }

</style>

Glassmorphism_EarthTones_SocialMedia_Filters

Il s’agit d’un composant complexe et réactif de filtres pour les réseaux sociaux avec un design glassmorphism, une palette de couleurs terreuse et une prise en charge complète du mode sombre. Comprend des éléments translucides semblables à du verre dépoli avec des effets de flou, du HTML sémantique et des options de filtre interactif.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-300 dark:from-stone-900 dark:to-stone-800 p-4 sm:p-6 lg:p-8 flex items-start justify-center font-sans">
  <div class="w-full max-w-4xl backdrop-blur-xl bg-white/30 dark:bg-stone-900/40 rounded-3xl shadow-xl border border-white/50 dark:border-stone-700/50 overflow-hidden relative">
    <div class="absolute inset-0 bg-gradient-to-br from-stone-200/10 to-stone-400/10 dark:from-stone-700/10 dark:to-stone-900/10 rounded-3xl pointer-events-none"></div>
    <div class="relative p-6 sm:p-8 lg:p-10">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 text-center">
        Explore Social Feeds
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
        <!-- Category Filter -->
        <div class="flex flex-col">
          <label for="category-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Category</label>
          <div class="relative">
            <select id="category-filter" class="w-full p-3 pr-10 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 appearance-none transition duration-300 ease-in-out backdrop-blur-sm">
              <option value="all">All Posts</option>
              <option value="news">News</option>
              <option value="photos">Photos</option>
              <option value="videos">Videos</option>
              <option value="events">Events</option>
              <option value="discussions">Discussions</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-stone-700 dark:text-stone-300">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <!-- People Filter -->
        <div class="flex flex-col">
          <label for="people-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">From People</label>
          <div class="relative">
            <input type="text" id="people-filter" placeholder="Search by name..." class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-700 dark:text-stone-300 pointer-events-none">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <!-- Location Filter -->
        <div class="flex flex-col">
          <label for="location-filter" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Location</label>
          <div class="relative">
            <input type="text" id="location-filter" placeholder="Near me or a city..." class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
            <div class="absolute inset-y-0 right-0 flex items-center pr-3 text-stone-700 dark:text-stone-300 pointer-events-none">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 grid grid-cols-2 md:grid-cols-4 gap-4">
        <!-- Date Range Filter -->
        <div class="flex flex-col">
          <label for="date-start" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Start Date</label>
          <input type="date" id="date-start" class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
        </div>
        <div class="flex flex-col">
          <label for="date-end" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">End Date</label>
          <input type="date" id="date-end" class="w-full p-3 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 transition duration-300 ease-in-out backdrop-blur-sm">
        </div>

        <!-- Sort By Filter -->
        <div class="flex flex-col col-span-2 md:col-span-1">
          <label for="sort-by" class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Sort By</label>
          <div class="relative">
            <select id="sort-by" class="w-full p-3 pr-10 text-stone-800 dark:text-stone-200 bg-white/50 dark:bg-stone-800/50 border border-white/70 dark:border-stone-700/70 rounded-xl focus:outline-none focus:ring-2 focus:ring-stone-600/50 dark:focus:ring-stone-400/50 appearance-none transition duration-300 ease-in-out backdrop-blur-sm">
              <option value="recent">Most Recent</option>
              <option value="popular">Most Popular</option>
              <option value="relevance">Relevance</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-stone-700 dark:text-stone-300">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <!-- Filter Options Checkboxes -->
        <div class="col-span-2 md:col-span-1 flex flex-col pt-2 md:pt-0">
          <span class="text-sm font-semibold text-stone-700 dark:text-stone-300 mb-2">Options</span>
          <div class="flex flex-wrap gap-x-4 gap-y-2">
            <label class="inline-flex items-center text-stone-700 dark:text-stone-300">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
              <span class="ml-2 text-sm">Followed</span>
            </label>
            <label class="inline-flex items-center text-stone-700 dark:text-stone-300">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
              <span class="ml-2 text-sm">Liked</span>
            </label>
            <label class="inline-flex items-center text-stone-700 dark:text-stone-300">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-stone-600 bg-white/50 dark:bg-stone-800/50 border-stone-400 dark:border-stone-600 rounded focus:ring-stone-500/70 dark:focus:ring-stone-400/70 checked:bg-stone-600 dark:checked:bg-stone-400 transition duration-150 ease-in-out">
              <span class="ml-2 text-sm">Comments</span>
            </label>
          </div>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 flex flex-col sm:flex-row gap-4 sm:gap-6">
        <button type="button" class="flex-1 py-3 px-6 rounded-xl text-lg font-semibold text-white bg-stone-600 hover:bg-stone-700 dark:bg-stone-700 dark:hover:bg-stone-600 active:scale-95 transition-all duration-300 ease-in-out shadow-lg shadow-stone-500/30 dark:shadow-stone-900/40 focus:outline-none focus:ring-2 focus:ring-stone-500/70 dark:focus:ring-stone-400/70">
          Apply Filters
        </button>
        <button type="button" class="flex-1 py-3 px-6 rounded-xl text-lg font-semibold text-stone-800 dark:text-stone-200 bg-white/60 dark:bg-stone-800/60 border border-white/70 dark:border-stone-700/70 hover:bg-white/80 dark:hover:bg-stone-700/80 active:scale-95 transition-all duration-300 ease-in-out shadow-lg shadow-stone-300/30 dark:shadow-stone-900/40 focus:outline-none focus:ring-2 focus:ring-stone-500/70 dark:focus:ring-stone-400/70">
          Reset Filters
        </button>
      </div>
    </div>
  </div>
</div>

Organic_Nature_Inspired_Food_Feedback_Component

Un composant de retour d’information de complexité modérée pour les sites Web d’alimentation/restaurant, avec un design organique/inspiré de la nature avec des tons de terre et une réactivité totale, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-800 bg-gradient-to-br from-lime-50 through-green-50 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden
    transform transition-all duration-300 ease-in-out
    border border-lime-200 dark:border-gray-700
    hover:shadow-2xl hover:-translate-y-1">

    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-lime-800 dark:text-lime-400 text-center
        font-serif tracking-tight leading-tight">
        Tell Us About Your Experience
      </h2>
      <p class="text-lg sm:text-xl text-center text-gray-600 dark:text-gray-400 mb-8 max-w-2xl mx-auto">
        Your feedback helps us grow the freshest experiences for you.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
        <!-- Left Section: Overall Rating and Image -->
        <div class="flex flex-col items-center justify-center p-4">
          <img src="https://picsum.photos/id/1080/600/400" alt="Fresh Food" class="rounded-2xl shadow-lg mb-6 w-full object-cover max-h-[250px] sm:max-h-[300px]
            border-4 border-lime-100 dark:border-gray-700">
          <h3 class="text-xl sm:text-2xl font-semibold text-center text-gray-700 dark:text-gray-300 mb-4">How was your meal?</h3>
          <div class="flex space-x-2 sm:space-x-4">
            <!-- Star Rating (Interactive-like without JS) -->
            <label for="rating1" class="cursor-pointer text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating1" value="1" class="sr-only">
            </label>
            <label for="rating2" class="cursor-pointer text-4xl sm:text-5xl text-gray-300 dark:text-gray-600 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating2" value="2" class="sr-only">
            </label>
            <label for="rating3" class="cursor-pointer text-4xl sm:text-5xl text-amber-400 dark:text-amber-500 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating3" value="3" class="sr-only" checked>
            </label>
            <label for="rating4" class="cursor-pointer text-4xl sm:text-5xl text-amber-400 dark:text-amber-500 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating4" value="4" class="sr-only">
            </label>
            <label for="rating5" class="cursor-pointer text-4xl sm:text-5xl text-amber-400 dark:text-amber-500 transition-colors duration-200 hover:text-amber-400 focus-within:text-amber-400">
              &#9733;
              <input type="radio" name="rating" id="rating5" value="5" class="sr-only">
            </label>
          </div>
        </div>

        <!-- Right Section: Feedback Form -->
        <div>
          <form class="space-y-6">
            <div>
              <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Your Name <span class="text-red-500">*</span></label>
              <input type="text" id="name" name="name" autocomplete="name" required
                class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm
                bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200
                focus:ring-lime-500 focus:border-lime-500 sm:text-base transition-colors duration-200
                placeholder-gray-400 dark:placeholder-gray-500 ">
            </div>

            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
              <input type="email" id="email" name="email" autocomplete="email"
                class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm
                bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200
                focus:ring-lime-500 focus:border-lime-500 sm:text-base transition-colors duration-200
                placeholder-gray-400 dark:placeholder-gray-500 ">
            </div>

            <div>
              <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Comments <span class="text-red-500">*</span></label>
              <textarea id="comments" name="comments" rows="5" required
                class="mt-1 block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm
                bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200
                focus:ring-lime-500 focus:border-lime-500 sm:text-base resize-y transition-colors duration-200
                placeholder-gray-400 dark:placeholder-gray-500 "></textarea>
            </div>

            <div class="flex items-center space-x-3 mb-4">
                <input type="checkbox" id="newsletter" name="newsletter" class="h-5 w-5 text-lime-600 dark:text-lime-500 rounded border-gray-300 dark:border-gray-600 focus:ring-lime-500">
                <label for="newsletter" class="text-sm text-gray-700 dark:text-gray-300">Sign up for Fresh Updates!</label>
            </div>

            <div class="dark:border-t dark:border-gray-700 pt-6 mt-6">
              <button type="submit" class="w-full flex justify-center py-3 px-6 border border-transparent rounded-full shadow-lg text-lg font-medium text-white
                bg-gradient-to-r from-lime-600 to-green-600 dark:from-lime-700 dark:to-green-700
                hover:from-lime-700 hover:to-green-700 dark:hover:from-lime-800 dark:hover:to-green-800
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 dark:focus:ring-offset-gray-800
                transform transition-all duration-300 ease-in-out scale-100 hover:scale-105">
                Submit Feedback
                <svg class="ml-2 -mr-1 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="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                </svg>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- Testimonial / Featured Feedback (as a static element) -->
    <div class="relative bg-lime-50 dark:bg-gray-900 p-6 sm:p-8 lg:p-10 mt-8 rounded-b-3xl
      border-t border-lime-200 dark:border-gray-700
      before:content-[''] before:absolute before:left-0 before:top-0 before:h-full before:w-1/2 before:bg-gradient-to-br before:from-lime-100 before:to-lime-50 dark:before:from-gray-800 dark:before:to-gray-900 before:rounded-bl-3xl before:opacity-50 before:-z-10
      after:content-[''] after:absolute after:right-0 after:top-0 after:h-full after:w-1/2 after:bg-gradient-to-tl after:from-green-100 after:to-lime-50 dark:after:from-gray-800 dark:after:to-gray-900 after:rounded-br-3xl after:opacity-50 after:-z-10">

      <blockquote class="relative z-10 text-center">
        <p class="text-xl sm:text-2xl font-serif italic text-gray-700 dark:text-gray-300 mb-4 leading-relaxed ">
          "The flavors were as fresh as a spring morning! Truly a delightful experience."
        </p>
        <div class="flex items-center justify-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer Avatar" class="w-14 h-14 rounded-full border-2 border-lime-300 dark:border-gray-600 shadow-md">
          <cite class="text-lg font-medium text-lime-800 dark:text-lime-400 not-italic">John Doe</cite>
          <span class="text-gray-500 dark:text-gray-400">- Food Enthusiast</span>
        </div>
      </blockquote>
    </div>

  </div>
</div>

1 ... 55 56 57 58 59 ... 335

Rechercher des composants

Catégories

Tous les composants