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
Glassmorphism Composant de profil utilisateur avec palette de couleurs monochromatique et complexité simple.
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 utilisateur réactif pour un tableau de bord, avec un thème pastel en mode sombre, construit avec Tailwind CSS. Il affiche les avatars des utilisateurs, les noms, les rôles et une brève description, avec un bouton de suivi. La conception s’adapte à différentes tailles d’écran et prend en charge le mode sombre en fonction des préférences du système.