Profilo utente Scheda semplice
Scheda del profilo utente reattiva con CSS Tailwind, Material Design, combinazione di colori dei toni della terra. Modalità oscura supportata, non è necessario JS.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="w-full max-w-sm p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/87.jpg" alt="User avatar">
<h2 class="mt-4 text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">Exploring the world, one byte at a time.</p>
</div>
<div class="grid grid-cols-2 gap-4 mt-6">
<div class="text-center">
<p class="text-gray-700 dark:text-gray-200">Followers</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">1.2k</p>
</div>
<div class="text-center">
<p class="text-gray-700 dark:text-gray-200">Following</p>
<p class="text-lg font-semibold text-gray-900 dark:text-white">350</p>
</div>
</div>
<div class="flex justify-center mt-6">
<button class="px-4 py-2 font-bold text-white bg-teal-600 rounded-lg shadow-md hover:bg-teal-700 dark:bg-teal-700 dark:hover:bg-teal-800">View Profile</button>
</div>
</div>
</div>Componenti correlati
Componente Profili utente
Un componente del profilo utente semplice e reattivo per l'e-commerce con microinterazioni, combinazione di colori complementare, supporto per la modalità scura e assenza di JavaScript.
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.
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.