Boutons analogues de like/réaction en mode sombre
Un composant complexe et réactif de boutons J’aime/Réaction pour un portfolio, avec une interface utilisateur en mode sombre et un schéma de couleurs analogue, mis en œuvre à l’aide de HTML pur et de CSS Tailwind. Il prend en charge le mode sombre via le préfixe dark : de Tailwind.
HTML Code
<div class="min-h-screen bg-gray-900 p-8 flex flex-col items-center justify-center dark:bg-gray-900">
<h1 class="text-4xl font-bold text-white mb-8">Portfolio Showcase</h1>
<div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full dark:bg-gray-800">
<div class="flex items-center mb-6">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 mr-4">
<div>
<p class="text-white text-lg font-semibold">John Doe</p>
<p class="text-gray-400 text-sm">Web Developer - <span class="text-purple-400">@john.doe</span></p>
</div>
</div>
<img src="https://picsum.photos/seed/portfolio-project/800/400" alt="Project Image" class="w-full h-64 object-cover rounded-md mb-6 border border-purple-600">
<p class="text-gray-300 text-base mb-6">
This is an example portfolio project showcasing a beautiful and responsive web design.
It utilizes modern CSS practices and aims for an excellent user experience. The color scheme
is analogous, creating a harmonious and aesthetically pleasing look.
</p>
<div class="flex items-center justify-between text-gray-400 text-sm mb-6">
<span>2 hours ago</span>
<span>UX/UI Design, Front-end Development</span>
</div>
<div class="flex items-center space-x-6">
<!-- Like Button -->
<button class="flex items-center text-gray-400 hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.71 18.29a.5.5 0 00.58 0c2.81-2.4 5.2-4.52 7.03-6.17a3.5 3.5 0 00.91-3.69c-.48-1.07-1.46-1.89-2.58-2.19-1.12-.3-2.31-.1-3.32.55-.57.36-1.12.79-1.63 1.25a.5.5 0 01-.7 0c-.51-.46-1.06-.89-1.63-1.25-1.01-.65-2.2-.85-3.32-.55-1.12.3-2.1.92-2.58 2.19a3.5 3.5 0 00.91 3.69c1.83 1.65 4.22 3.77 7.03 6.17z" clip-rule="evenodd"></path>
</svg>
<span class="font-semibold">Like</span>
<span class="ml-1 text-sm">(1.2K)</span>
</button>
<!-- Comment Button -->
<button class="flex items-center text-gray-400 hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M18 10c0 3.86-3.14 7-7 7a6.99 6.99 0 01-5.73-3.03l-2.28.85a.5.5 0 01-.62-.5V9.45a7 7 0 017.5-7.42A7 7 0 0118 10zm-5.73 3.03l2.28-.85a.5.5 0 01.62.5V10.55a6.5 6.5 0 00-7.39-7.1A6.5 6.5 0 004 10a6.5 6.5 0 006.5 6.5c2.47 0 4.67-1.39 5.77-3.47z" clip-rule="evenodd"></path>
</svg>
<span class="font-semibold">Comment</span>
<span class="ml-1 text-sm">(245)</span>
</button>
<!-- Share Button with more complex hover -->
<button class="flex items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 group">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 11.293a1 1 0 010-1.414L10.586 7 7.707 4.121a1 1 0 011.414-1.414L12 5.586l2.879-2.879a1 1 0 111.414 1.414L13.414 7l2.879 2.879a1 1 0 01-1.414 1.414L12 8.414l-2.879 2.879a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M12 17a1 1 0 100-2H7a1 1 0 100 2h5z" clip-rule="evenodd"></path>
</svg>
<span class="font-semibold">Share</span>
<span class="ml-1 text-sm">(50)</span>
<div class="absolute left-1/2 -ml-16 mt-12 p-3 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
Share via:
<div class="flex mt-2 space-x-2">
<button class="px-3 py-1 rounded-full bg-blue-600 hover:bg-blue-700 transition duration-200">Facebook</button>
<button class="px-3 py-1 rounded-full bg-blue-400 hover:bg-blue-500 transition duration-200">Twitter</button>
</div>
</div>
</button>
</div>
<!-- Reaction Buttons (more complex) -->
<div class="mt-8 pt-6 border-t border-gray-700 flex flex-wrap items-center justify-around">
<button class="flex flex-col items-center text-gray-400 hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
<span class="text-3xl">👍</span>
<span class="text-sm mt-1">Like</span>
<span class="text-xs">(800)</span>
</button>
<button class="flex flex-col items-center text-gray-400 hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
<span class="text-3xl">❤️</span>
<span class="text-sm mt-1">Love</span>
<span class="text-xs">(300)</span>
</button>
<button class="flex flex-col items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
<span class="text-3xl">😆</span>
<span class="text-sm mt-1">Haha</span>
<span class="text-xs">(150)</span>
</button>
<button class="flex flex-col items-center text-gray-400 hover:text-blue-500 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
<span class="text-3xl">😮</span>
<span class="text-sm mt-1">Wow</span>
<span class="text-xs">(90)</span>
</button>
<button class="flex flex-col items-center text-gray-400 hover:text-orange-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
<span class="text-3xl">😢</span>
<span class="text-sm mt-1">Sad</span>
<span class="text-xs">(40)</span>
</button>
<button class="flex flex-col items-center text-gray-400 hover:text-teal-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
<span class="text-3xl">😡</span>
<span class="text-sm mt-1">Angry</span>
<span class="text-xs">(20)</span>
</button>
</div>
</div>
</div>Composants associés
Boutons J’aime/Réaction
Composant de boutons J’aime/Réaction avec design brutal, tons de terre, interactions complexes, réactif, prise en charge du thème sombre. Pas de JS, du HTML pur avec Tailwind.
Composant Like/Reaction Buttons
Un composant complexe de boutons J’aime/Réaction avec des micro-interactions, une palette de couleurs analogue, un design réactif et une prise en charge du thème sombre, adapté à un tableau de bord. Utilise Tailwind CSS et comprend plusieurs éléments interactifs avec des animations attrayantes.