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 profil d’utilisateur simple et réactif avec un style aquarelle/artistique et une palette de couleurs arc-en-ciel dégradée, adapté aux plateformes de marché. Inclut la prise en charge du mode sombre.
Composant de profils d’utilisateur Neumorphism avec des couleurs vives
Composant de profils d’utilisateur Neumorphism avec des couleurs vives pour les sites Web d’entreprise/d’entreprise, conception réactive avec prise en charge du thème sombre.
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.