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 composant complexe, monochrome et de style industriel pour les sites Web de voyage/tourisme, présentant des matériaux bruts, des éléments exposés et une esthétique utilitaire. Il est entièrement réactif et prend en charge le mode sombre.
Composant Mentions de l’utilisateur
Un composant complexe et réactif pour les sites Web d’événements/conférences, doté d’un design inspiré du Bauhaus avec des couleurs sourdes/désaturées et une prise en charge du mode sombre. Il permet aux utilisateurs de rechercher et de sélectionner des contacts à mentionner.
Composant Mentions de l’utilisateur
Un composant simple de mentions d’utilisateur conçu dans un style brutaliste avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise et d’entreprise. Il inclut des mentions d’utilisateurs avec des avatars et est réactif avec la prise en charge du thème sombre.