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.
HTML Code
<div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">John Doe</span>
<p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Jane Smith</span>
<p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Michael Brown</span>
<p class="text-gray-700 dark:text-gray-400">Started following you</p>
</div>
</div>
</div>
Composants associés
Composant Mentions de l’utilisateur
Un utilisateur complexe mentionne un composant conçu pour les tableaux de bord avec prise en charge du mode sombre et schéma de couleurs triadique.
Composant Mentions d’utilisateur - Skeuomorphisme
L’utilisateur mentionne le composant avec la conception skeuomorphism, les effets réactifs et la prise en charge du thème sombre en utilisant uniquement html avec tailwind css. Pas besoin de javascript.
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.