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 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.
Componente Profili utente
Un componente del profilo utente reattivo che utilizza Tailwind CSS, con influenze di Material Design e una combinazione di colori monocromatici. Supporta la modalità oscura e visualizza le informazioni sull'utente, le statistiche e l'attività recente.
Componente Profili utente
Un componente del profilo utente semplice e artistico progettato per siti Web di viaggi/turismo, con texture ad acquerello morbide, una combinazione di colori sfumata arcobaleno, reattività e supporto per la modalità scura.