Composant Mentions de l’utilisateur
Un composant simple et minimaliste que l’utilisateur mentionne, avec prise en charge du mode sombre. Les avatars et les noms des utilisateurs cliquables sont affichés dans une mise en page flexbox. Le composant est réactif et s’adapte à différentes tailles d’écran.
HTML Code
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Mentioned Users</h3>
<div class="flex flex-wrap gap-4">
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">John Doe</a>
</div>
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Jane Smith</a>
</div>
<div class="flex items-center space-x-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Peter Jones</a>
</div>
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un utilisateur mentionne un composant utilisant Tailwind CSS avec la conception Glassmorphism, la réactivité et la prise en charge du thème sombre.
Composant Mentions de l’utilisateur
Un composant simple, propre et réactif avec une palette de couleurs vives, conçu dans un style de typographie suisse/international pour une utilisation en portfolio. Inclut la prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Un composant de mentions d’utilisateur réactif conçu pour les interfaces de commerce électronique en mode sombre, avec des tons de terre et des avatars d’utilisateurs et des images de produits. Fournit une liste de mentions suggérées avec les détails de l’utilisateur et un produit associé, adapté au balisage ou aux fonctionnalités collaboratives.