Composant Mentions de l’utilisateur
Composant avec prise en charge du mode sombre, avec des effets réactifs et la prise en charge du thème sombre. Utilise des images d’espace réservé aléatoires de picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="bg-gray-900 text-white p-4 rounded-lg">
<h2 class="text-xl font-bold mb-4">User Mentions</h2>
<div class="space-y-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="font-semibold">John Doe</p>
<p class="text-gray-400 text-sm">Mentioned you in a comment</p>
</div>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div>
<p class="font-semibold">Jane Smith</p>
<p class="text-gray-400 text-sm">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/19.jpg" alt="Avatar">
<div>
<p class="font-semibold">Peter Jones</p>
<p class="text-gray-400 text-sm">Mentioned you in a message</p>
</div>
</div>
</div>
</div>Composants associés
Composant Mentions de l’utilisateur
Un utilisateur de style Neumorphism mentionne un composant utilisant des tons de terre pour un site Web de portfolio, avec un design réactif et une prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Composant avec le style Glassmorphism, la palette de couleurs pastel et le niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre, à l’aide de Tailwind CSS.
Mentions de l’utilisateur Composant 15
Composant Web qui affiche les mentions des utilisateurs dans un style Material Design, avec des effets réactifs et la prise en charge des thèmes sombres.