Composant Mentions de l’utilisateur
Un utilisateur réactif mentionne un composant conçu pour le mode sombre avec la prise en charge de Tailwind CSS.
HTML Code
<div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg">
<h2 class="text-lg font-semibold mb-2">Mentions</h2>
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="font-medium">John Doe</p>
<p class="text-gray-400 text-sm">@johndoe</p>
</div>
</div>
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="font-medium">Jane Smith</p>
<p class="text-gray-400 text-sm">@janesmith</p>
</div>
</div>
<div class="flex items-center space-x-3 mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex-1">
<p class="font-medium">Mike Johnson</p>
<p class="text-gray-400 text-sm">@mikejohnson</p>
</div>
</div>
<a href="#" class="text-blue-400 hover:underline">View more mentions</a>
</div>
<style>
/* Dark mode styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
}
}
</style>Composants associés
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 d’utilisateurs avec prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Les images proviennent de picsum.photos et les avatars de randomuser.me.
Composant Mentions de l’utilisateur
Un composant complexe, inspiré de la 3D, avec des couleurs d’automne, adapté aux marques de mode/beauté. Comprend des avatars d’utilisateurs, des noms, des rôles et un nombre de mentions, avec une réactivité totale et une prise en charge du mode sombre.