Componente Menzioni utente
Un utente scheumorfico menziona un componente progettato per imitare gli elementi del mondo reale, con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 max-w-xl mx-auto mt-10">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-4">Mentions</h2>
<div class="flex flex-col gap-3">
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">@john_doe</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">@jane_smith</p>
</div>
</div>
<div class="flex items-center p-3 bg-gray-100 dark:bg-gray-700 rounded-md hover:shadow-md transition-shadow duration-200">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-medium text-gray-800 dark:text-gray-200">Michael Johnson</p>
<p class="text-gray-600 dark:text-gray-400">@michael_j</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente Menzioni utente
Un utente reattivo menziona un componente progettato per le interfacce di e-commerce in modalità scura, con toni della terra e avatar utente segnaposto e immagini dei prodotti. Fornisce un elenco di menzioni suggerite con i dettagli dell'utente e un prodotto associato, adatto per l'aggiunta di tag o per le funzionalità di collaborazione.
Componente Menzioni utente
Componente che implementa lo stile Glassmorphism con design reattivo e supporto per la modalità scura.
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.