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.
Codice HTML
<div class="p-4 bg-gradient-to-r from-yellow-400 to-pink-500 dark:from-yellow-600 dark:to-pink-700 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-white mb-4">User Mentions</h2>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">John Doe</span>
<p class="text-gray-700 dark:text-gray-400">Mentioned you in a post</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Jane Smith</span>
<p class="text-gray-700 dark:text-gray-400">Commented on your photo</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-white dark:bg-gray-800 p-3 rounded-md mt-3">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="flex flex-col">
<span class="text-black dark:text-white font-semibold">Michael Brown</span>
<p class="text-gray-700 dark:text-gray-400">Started following you</p>
</div>
</div>
</div>
Componenti correlati
Componente Menzioni utente
Un componente semplice e minimalista per i blog e il consumo di contenuti, caratterizzato da un design reattivo con supporto per temi scuri.
Componente Menzioni utente
Un componente reattivo per le menzioni dell'utente con supporto per il tema scuro, progettato per i siti Web aziendali. Presenta microinterazioni che utilizzano Tailwind CSS e una combinazione di colori color terra.
Componente Menzioni utente
Un utente reattivo menziona un componente con supporto per temi scuri e microinterazioni, progettato per siti Web aziendali che utilizzano Tailwind CSS.