Boutons J’aime/Réaction

Composant de boutons J’aime/Réaction avec micro-interactions, Schéma de couleurs complémentaires, Complexité simple, à des fins de médias sociaux.

Ouvrir l’aperçu

                <div class="flex items-center justify-center space-x-4">
  <!-- Light mode: Like button -->
  <button class="flex items-center space-x-1 text-blue-600 dark:text-blue-400 focus:outline-none">
    <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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
    </svg>
    <span>Like</span>
  </button>

  <!-- Dark mode: Like button -->
  <button class="flex items-center space-x-1 text-gray-400 dark:text-gray-600 dark:hover:text-blue-400 focus:outline-none">
    <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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
    </svg>
    <span>Like</span>
  </button>

  <button class="flex items-center space-x-1 text-red-600 dark:text-red-400 focus:outline-none">
    <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="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
    </svg>
    <span>Love</span>
  </button>
</div>

Composant Like/Reaction Buttons

Un composant de boutons Like/Reaction de style rétro/vintage, comprenant une gamme de boutons interactifs pour les réactions avec une prise en charge du thème sombre et un design réactif. Ce composant est adapté à un tableau de bord, permettant aux utilisateurs de réagir à divers éléments de l’interface.

Ouvrir l’aperçu

                <div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
    <div class="flex justify-around mb-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
    </div>
    <hr class="border-gray-600 mb-4">
    <div class="flex items-center justify-center">
        <img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <p class="text-gray-400 text-center">React to the content with your feelings!</p>
    </div>
</div>

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
    <h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
    </div>
</div>

Composant Like/Reaction Buttons

Un composant web complexe caractérisé par un morphisme en verre avec des éléments translucides et des effets de flou. Il comprend plusieurs éléments interactifs conçus pour les sites Web d’entreprise, prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-8 bg-gray-900 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://picsum.photos/50/50" alt="User Avatar" class="w-12 h-12 rounded-full border border-white">
    <span class="text-white text-lg font-semibold">Your Name</span>
  </div>

  <span class="text-white text-sm mb-4">How do you feel about this?</span>

  <div class="flex space-x-4">
    <button class="p-4 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-blue-700 dark:to-purple-800 dark:hover:from-blue-800 dark:hover:to-purple-900">
      Like
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-yellow-500 dark:to-orange-600 dark:hover:from-yellow-600 dark:hover:to-orange-700">
      Love
    </button>
    <button class="p-4 rounded-lg bg-gradient-to-r from-red-400 to-pink-500 hover:from-red-500 hover:to-pink-600 transition-all duration-300 text-white shadow-lg dark:bg-gradient-to-r dark:from-red-500 dark:to-pink-600 dark:hover:from-red-600 dark:hover:to-pink-700">
      Angry
    </button>
  </div>

  <div class="mt-6 flex items-center space-x-2">
    <span class="text-white">Total Reactions:</span>
    <span class="text-white font-bold">123</span>
  </div>
</div>

Composant Like/Reaction Buttons

Composant codé en HTML avec Tailwind CSS, avec un design brutal, une palette de couleurs Earth tones et une complexité modérée, adapté au commerce électronique. Comprend la conception réactive et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center p-4 bg-stone-200 dark:bg-stone-800 font-mono">

  <!-- Like Button -->
  <button class="flex items-center justify-center px-6 py-3 mb-4 text-lg font-bold text-stone-900 uppercase bg-stone-400 border-t-4 border-l-4 border-b-0 border-r-0 border-stone-900 dark:text-stone-100 dark:bg-stone-700 dark:border-stone-100">
    <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4v6m0 0l-4 4m4-4L8 4m7 10l-2 2m0 0l-2-2m2 2l2 2"></path></svg>
    Like (120)
  </button>

  <!-- Reactions -->
  <div class="flex space-x-4">
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">👍 50</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😂 30</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😢 10</button>
    <button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😍 25</button>
  </div>

</div>

Boutons de réaction skeuomorphe

Un ensemble de boutons J’aime et de réaction avec un style de conception Skeuomorphique, prenant en charge les mises en page réactives et le mode sombre. Les boutons sont implémentés uniquement avec HTML et Tailwind CSS, sans JavaScript. Le mode sombre est géré via les classes CSS. Les images de remplacement sont utilisées pour les avatars.

Ouvrir l’aperçu

                 <style>
      .skeuomorphic {
        background-color: #e0e0e0;
        box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
        border-radius: 10px;
        padding: 10px;
      }

      .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
      }

      .dark .skeuomorphic {
        background-color: #333;
        box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
      }

      .dark .skeuomorphic:active {
        box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
      }
    </style>
    <div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
      <div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Like</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Love</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Haha</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Wow</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Sad</span>
        </button>

        <button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 text-gray-500 dark:text-gray-300"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <span class="text-gray-700 dark:text-gray-300">Angry</span>
        </button>
      </div>
    </div>

Boutons J’aime/Réaction

Composant Like/Reaction Buttons avec prise en charge des micro-interactions, de la réactivité et du thème sombre

Ouvrir l’aperçu

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 min-h-screen">
  <div class="flex space-x-4">
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out transform hover:scale-110">
      <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="M14 10h4.764a2 2 0 011.808 2.808l-7.922 8.802a1.995 1.995 0 01-2.808.01z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10h.01M7 10v7a3 3 0 003 3h.01M7 10h10.929c.795 0 1.549-.394 2-.664"></path>
      </svg>
      <span>Like</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition duration-200 ease-in-out transform hover:scale-110">
      <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="M20.84 4.91a2.14 2.14 0 00-3.03 0L12 10.78l-5.81-5.87a2.14 2.14 0 00-3.03 0 2.18 2.18 0 000 3.07L12 17l8.84-8.92a2.18 2.18 0 000-3.07z"></path>
      </svg>
      <span>Love</span>
    </button>
    <button class="flex items-center space-x-1 text-gray-600 dark:text-gray-300 hover:text-yellow-500 dark:hover:text-yellow-400 transition duration-200 ease-in-out transform hover:scale-110">
      <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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
      </svg>
      <span>Haha</span>
    </button>
  </div>
</div>

Composant Like/Reaction Buttons

Un composant Web qui comporte des boutons J’aime et Réaction conçus dans un style skeuomorphe, avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-xs mx-auto">
    <div class="flex items-center justify-between w-full">
        <img src="https://picsum.photos/50/50?random=1" alt="Avatar" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="flex space-x-2">
            <button class="flex items-center bg-gradient-to-br from-blue-400 to-blue-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>👍</span> Like
            </button>
            <button class="flex items-center bg-gradient-to-br from-yellow-400 to-yellow-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>❤️</span> Love
            </button>
            <button class="flex items-center bg-gradient-to-br from-red-400 to-red-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>😂</span> Haha
            </button>
            <button class="flex items-center bg-gradient-to-br from-green-400 to-green-600 text-white py-2 px-4 rounded-lg shadow-md transform hover:scale-105 hover:shadow-xl transition-all duration-300">
                <span>😮</span> Wow
            </button>
        </div>
    </div>
    <div class="mt-4 text-center text-gray-700 dark:text-gray-300">
        <p class="text-sm">Tap your reaction!</p>
    </div>
</div>

Composant Like/Reaction Buttons

Un composant 3D Design Like/Reaction Buttons utilisant Tailwind CSS avec prise en charge du thème sombre et effets réactifs.

Ouvrir l’aperçu

                <div class="flex justify-center items-center space-x-4 p-8 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">Like</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" /> 
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-pink-500 rounded hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-500">Love</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-yellow-500 rounded hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-500">Wow</button>
    </div>
    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-md transform transition-transform duration-200 hover:scale-105">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
        <button class="mt-2 px-4 py-2 text-sm font-bold text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-500">Haha</button>
    </div>
</div>

Composant Like/Reaction Buttons

Un composant de boutons J’aime/Réaction conçu dans le style Brutalism avec Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
            👍 Like
        </button>
        <button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
            ❤️ Love
        </button>
        <button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
            😂 Haha
        </button>
        <button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
            😮 Wow
        </button>
    </div>
    <div class="flex space-x-4">
        <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
        <img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a202c;
        }
    }
</style>

Composant Like/Reaction Buttons

Un composant Web comportant des boutons J’aime et Réaction avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-4">
  <h2 class="text-xl font-semibold mb-4 dark:text-white">React to this</h2>
  <div class="flex space-x-4">
    <button class="group bg-blue-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20" alt="like" class="rounded-full">
        <span>Like</span>
      </span>
    </button>
    <button class="group bg-gray-300 text-gray-800 px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=1" alt="love" class="rounded-full">
        <span>Love</span>
      </span>
    </button>
    <button class="group bg-yellow-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-yellow-600 focus:outline-none focus:ring focus:ring-yellow-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=2" alt="laugh" class="rounded-full">
        <span>Laugh</span>
      </span>
    </button>
    <button class="group bg-red-500 text-white px-4 py-2 rounded-full transition-transform transform hover:scale-105 hover:bg-red-600 focus:outline-none focus:ring focus:ring-red-300">
      <span class="flex items-center space-x-2">
        <img src="https://picsum.photos/20/20?random=3" alt="wow" class="rounded-full">
        <span>Wow</span>
      </span>
    </button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #ffffff;
    }
  }
</style>

Catégories

Boutons J’aime/Réaction