Composant Mentions de l’utilisateur
Un composant de mentions d’utilisateur réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les sites Web d’entreprise utilisant Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">User Mentions</h2>
<div class="space-y-4">
<!-- Mention 1 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">Jane Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Mentioned you in a post</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" 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 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
<!-- Mention 2 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">John Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Replied to your comment</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" 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 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
<!-- Mention 3 -->
<div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User avatar">
<div>
<p class="text-sm font-semibold text-gray-900 dark:text-white">Jessica Williams</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Liked your photo</p>
</div>
<div class="ml-auto">
<svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" 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 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant Mentions de l’utilisateur
Un composant réactif de mentions d’utilisateur avec des éléments de conception 3D, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre pour les sites Web d’entreprise. Utilise Tailwind CSS et inclut des images/avatars de substitution.
Composant Mentions de l’utilisateur
Un composant de mention utilisateur avec conception 3D, effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Mentions de l’utilisateur
Un composant réactif de mentions de l’utilisateur conçu avec un style rétro/vintage et une palette de couleurs analogue, prenant en charge le mode sombre. Il comporte des avatars d’utilisateurs, des noms et des textes de message adaptés aux interfaces de médias sociaux.