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.
HTML Code
<div class="relative h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center">
<div class="container mx-auto p-6">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden">
<div class="relative h-48 bg-gray-300 dark:bg-gray-700">
<img class="w-full h-full object-cover object-center" src="https://picsum.photos/seed/random/800/400" alt="Background">
<div class="absolute inset-0 bg-black opacity-25"></div>
</div>
<div class="relative px-6 pb-6 mt-[-70px]">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="w-20 h-20 rounded-full overflow-hidden border-4 border-white dark:border-gray-800">
<img class="w-full h-full object-cover object-center" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
</div>
<h3 class="text-gray-900 dark:text-white text-2xl font-semibold">John Doe</h3>
</div>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition duration-300">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
</svg>
</button>
</div>
<p class="mt-4 text-gray-700 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex justify-around items-center mt-6">
<div class="text-center">
<p class="text-gray-900 dark:text-white text-xl font-semibold">1.2K</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Followers</p>
</div>
<div class="text-center">
<p class="text-gray-900 dark:text-white text-xl font-semibold">500</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Following</p>
</div>
<div class="text-center">
<p class="text-gray-900 dark:text-white text-xl font-semibold">10K</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Likes</p>
</div>
</div>
<div class="mt-6">
<h4 class="text-gray-900 dark:text-white text-lg font-semibold">Recent Activity</h4>
<ul class="mt-4 space-y-3">
<li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
<span>Posted a new article</span>
</li>
<li class="flex items-center space-x-3 text-gray-700 dark:text-gray-300">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>Liked a post</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Profils utilisateur
Un composant de profils d’utilisateur réactif doté d’un style de conception glassmorphism, avec prise en charge des thèmes sombres et utilisation de Tailwind CSS.
Composant Profils utilisateur
Composant de profils utilisateur conçu pour un tableau de bord en mode sombre avec une palette de couleurs pastel et des fonctionnalités de complexité modérée.