Componente Menzioni utente
Componente menzionato dall'utente con supporto per la modalità oscura, con effetti reattivi e supporto per temi scuri. Utilizza immagini segnaposto casuali da picsum.photos per le immagini e randomuser.me per gli avatar.
Codice HTML
<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>Componenti correlati
Componente Menzioni utente
Un utente reattivo menziona un componente progettato per la modalità oscura con supporto CSS Tailwind.
Componente Menzioni utente
Un componente reattivo per le menzioni dell'utente con design Glassmorphism, combinazione di colori complementari e supporto per la modalità oscura, adatto per siti Web aziendali.
Componente Menzioni utente
Un componente utente complesso e reattivo menziona per piattaforme educative con uno stile acquerello/artistico, una combinazione di colori neutri freddi e il supporto della modalità scura. Presenta avatar utente, nomi, ruoli e un sottile effetto di sfondo ad acquerello.