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 profils d’utilisateurs pour les sites Web agricoles, avec un style de design industriel avec des couleurs sourdes, des avatars d’utilisateurs, des rôles et des informations de localisation. Il est réactif et prend en charge le mode sombre.
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 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.