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 componente reattivo menzionato dall'utente progettato con stile retrò / vintage e combinazione di colori analoga, che supporta la modalità oscura. Presenta avatar utente, nomi e testo dei messaggi adatti alle interfacce dei social media.
Componente Menzioni utente
Un utente retrò-vintage menziona un componente per l'e-commerce con colori triadici, complessità moderata, reattività e supporto per la modalità scura. Niente JavaScript.
Componente Menzioni dell'utente - Skeuomorphism
L'utente menziona il componente con design scheumorfismo, effetti reattivi e supporto per temi scuri utilizzando solo html con css tailwind. Non è necessario alcun javascript.