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.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
<div class="relative">
<img class="w-full h-40 object-cover object-center" src="https://picsum.photos/seed/material/400/200" alt="Profile background">
<div class="absolute inset-0 bg-blue-500 opacity-40"></div>
</div>
<div class="relative z-10 -mt-16 flex items-center justify-center">
<img class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-800 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
</div>
<div class="text-center p-6">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-blue-600 dark:text-blue-400">@johndoe</p>
<p class="mt-3 text-gray-600 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="flex justify-around border-t border-gray-200 dark:border-gray-700 py-4">
<div class="text-center">
<p class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Followers</p>
</div>
<div class="text-center">
<p class="text-lg font-semibold text-gray-800 dark:text-white">350</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Following</p>
</div>
<div class="text-center">
<p class="text-lg font-semibold text-gray-800 dark:text-white">2.5K</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Likes</p>
</div>
</div>
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
<h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Recent Activity</h4>
<ul class="space-y-4">
<li class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
</div>
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Jane Smith</span> liked your post.</p>
<p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
</div>
</li>
<li class="flex items-start">
<div class="flex-shrink-0">
<img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User avatar">
</div>
<div class="ml-3">
<p class="text-sm text-gray-600 dark:text-gray-400"><span class="font-medium text-gray-800 dark:text-white">Peter Jones</span> commented on your photo.</p>
<p class="text-xs text-gray-500 dark:text-gray-500">5 hours ago</p>
</div>
</li>
</ul>
</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
Componente Profili utente con design del neumorfismo, effetti reattivi e supporto per temi scuri.
Componente Profili utente
Un componente dei profili utente progettato per un dashboard in modalità scura con combinazione di colori pastello e funzionalità di complessità moderata.