Componente Profili utente
Un componente del profilo utente semplice e reattivo caratterizzato da microinterazioni con una combinazione di colori triadica, adatto per siti Web aziendali o aziendali.
Codice HTML
<div class="max-w-sm mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/seed/profile/400/200" alt="Profile Background">
<div class="flex items-center mt-4">
<img class="w-16 h-16 rounded-full border-4 border-blue-500 dark:border-yellow-500" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400 transition-colors">View Profile</button>
<button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Message</button>
</div>
</div>Componenti correlati
Componente Profili utente
Un componente dei profili utente progettato in uno stile brutalista con una combinazione di colori triadica, caratterizzata da una complessità moderata adatta al consumo di blog/contenuti e un design reattivo con supporto per temi scuri.
Componente Profili utente
Un componente dei profili utente progettato in stile Brutalismo utilizzando Tailwind CSS, con una combinazione di colori monocromatica e fornendo un'interfaccia per il social networking. Supporta la modalità oscura ed è reattivo.
Componente Profili utente
Un componente di profili utente reattivo per una dashboard, con un tema pastello in modalità scura, costruito con Tailwind CSS. Mostra gli avatar degli utenti, i nomi, i ruoli e una breve descrizione, con un pulsante Segui. Il design si adatta alle diverse dimensioni dello schermo e supporta la modalità oscura in base alle preferenze del sistema.