Componente Menzioni utente
Un componente reattivo per le menzioni utente con supporto per il tema scuro che utilizza Tailwind CSS. Non è necessario JavaScript, solo HTML con classi Tailwind. Per la modalità scura, usa il prefisso dark: di Tailwind per lo styling. Le immagini provengono da picsum.photos e gli avatar da randomuser.me.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-900 py-8">
<div class="max-w-3xl mx-auto px-4">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">User Mentions</h2>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end text-gray-500 dark:text-gray-400 text-sm">
<span>2 days ago</span>
</div>
</div>
<!-- Repeat similar blocks for other mentions -->
</div>
</div>Componenti correlati
Componente Menzioni utente
Un utente menziona un componente progettato con uno stile Glassmorphism con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Include un supporto per il tema scuro ed è reattivo, il che lo rende adatto per i siti di e-commerce.
Componente Menzioni utente
Un utente menziona un componente per una dashboard, caratterizzato da una combinazione di colori monocromatica, layout semplice, design reattivo e supporto per temi scuri, utilizzando Tailwind CSS.
L'utente menziona il componente 15
Un componente Web che visualizza le menzioni dell'utente in uno stile Material Design, con effetti reattivi e supporto per temi scuri.