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 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 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.
Componente Menzioni utente
Un componente menzionato dall'utente è stato progettato con microinterazioni, con effetti reattivi e supporto per temi scuri, creato utilizzando Tailwind CSS.