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
Composant mettant en œuvre le style Glassmorphism avec un design réactif et la prise en charge du mode sombre.
Composant Mentions de l’utilisateur
Un composant simple et minimaliste pour les blogs et la consommation de contenu, doté d’un design réactif avec prise en charge du thème sombre.
Composant Mentions de l’utilisateur
Un composant conçu avec des micro-interactions, avec des effets réactifs et une prise en charge du thème sombre, construit à l’aide de Tailwind CSS.