Composant Profils utilisateur
Un composant de profils d’utilisateurs réactif et minimaliste pour les médias sociaux, avec plusieurs profils avec des informations sur l’utilisateur, des boutons de suivi et la prise en charge du mode sombre. Utilise un schéma de couleurs analogue.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-slate-900 dark:to-gray-900 min-h-screen font-sans">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center">
Featured Profiles
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Profile Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile picture of Jane Doe">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Jane Doe</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@janedo_e</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Passionate photographer exploring the world's hidden beauty through my lens. Sharing moments, one click at a time.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.2K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">350</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">98</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile picture of John Smith">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">John Smith</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@johns_dev</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Frontend developer building engaging user experiences. Passionate about clean code and modern web technologies.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">870</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">210</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">65</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile picture of Sarah Lee">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Sarah Lee</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@sarah_art</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Digital artist and illustrator. Turning imagination into vivid colors and captivating visuals. Always learning, always creating.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.5K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">400</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">120</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 4 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile picture of Mike Ross">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Mike Ross</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@mikero_ss</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Travel enthusiast documenting journeys across continents. Seeking adventure and sharing the beauty of different cultures.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">950</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">280</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">80</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 5 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-indigo-300 dark:ring-purple-500" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Profile picture of Emily White">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">Emily White</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@emily_reads</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Book lover and aspiring writer. Diving into new worlds, one page at a time. Sharing reviews and literary thoughts.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">720</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">190</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">55</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
<!-- Profile Card 6 -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 p-6 flex flex-col items-center text-center border border-gray-100 dark:border-gray-700">
<img class="w-24 h-24 rounded-full object-cover mb-4 ring-2 ring-purple-300 dark:ring-indigo-500" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Profile picture of David Green">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">David Green</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">@david_music</p>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-3">Musician and composer. Creating melodies that tell stories. Exploring sounds from classical to electronic.</p>
<div class="flex justify-center gap-4 mb-4">
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">1.1K</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">300</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Following</p>
</div>
<div class="text-gray-700 dark:text-gray-300">
<p class="font-bold text-lg leading-tight">110</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="w-full py-2 px-4 rounded-lg bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-300 dark:bg-purple-600 dark:hover:bg-purple-700">
Follow
</button>
</div>
</div>
</div>
</div>Composants associés
Composant Profils utilisateur
Un composant de profil d’utilisateur réactif avec une esthétique de conception 3D et une palette de couleurs de terre, adapté aux sites Web de voyage et de tourisme. Inclut la prise en charge du 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.
Profil d’utilisateur Simple Card
Carte de profil d’utilisateur réactive avec CSS Tailwind, conception matérielle, schéma de couleurs Earth Tones. Mode sombre pris en charge, pas besoin de JS.