Composant Profils utilisateur
Un composant de profil utilisateur réactif utilisant Tailwind CSS, avec des influences de Material Design et une palette de couleurs monochromatique. Prend en charge le mode sombre et affiche les informations de l’utilisateur, les statistiques et l’activité récente.
HTML Code
<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>Composants associés
Composant Profils utilisateur
Un composant de profils d’utilisateurs conçu dans un style brutaliste à l’aide de Tailwind CSS, avec une palette de couleurs monochromatiques et fournissant une interface pour les réseaux sociaux. Il prend en charge le mode sombre et est réactif.
Composant Profils utilisateur
Un composant de profils d’utilisateur conçu dans un style brutaliste avec une palette de couleurs triadique, avec une complexité modérée adaptée à la consommation de blog/contenu, et une conception réactive avec prise en charge du thème sombre.
Composant Profils utilisateur
Un composant de profil utilisateur réactif avec des micro-interactions, une palette de couleurs en niveaux de gris, une mise en page complexe, une prise en charge du mode sombre et des images/avatars aléatoires.