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.
HTML Code
<div class="min-h-screen bg-gray-900 p-4 dark:bg-gray-900">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- User Profile Card 1 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-purple-300 dark:text-purple-300">John Doe</h2>
<p class="text-blue-300 dark:text-blue-300">Software Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Passionate about clean code and scalable architectures.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-purple-600 text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700">Follow</button>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-green-300 dark:text-green-300">Jane Smith</h2>
<p class="text-teal-300 dark:text-teal-300">UI/UX Designer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Creating intuitive and beautiful user experiences.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-green-600 text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 dark:bg-green-600 dark:hover:bg-green-700">Follow</button>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-blue-300 dark:text-blue-300">Peter Jones</h2>
<p class="text-cyan-300 dark:text-cyan-300">Data Scientist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Uncovering insights from complex datasets.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700">Follow</button>
</div>
</div>
<!-- User Profile Card 4 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/65.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-yellow-300 dark:text-yellow-300">Sarah Brown</h2>
<p class="text-orange-300 dark:text-orange-300">Product Manager</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Bringing innovative products to life.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-yellow-600 text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-opacity-50 dark:bg-yellow-600 dark:hover:bg-yellow-700">Follow</button>
</div>
</div>
<!-- User Profile Card 5 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-red-300 dark:text-red-300">Michael Green</h2>
<p class="text-pink-300 dark:text-pink-300">DevOps Engineer</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Automating deployments and managing infrastructure.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-red-600 text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 dark:bg-red-600 dark:hover:bg-red-700">Follow</button>
</div>
</div>
<!-- User Profile Card 6 -->
<div class="bg-gray-800 rounded-lg p-6 shadow-lg dark:bg-gray-800">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<h2 class="text-xl font-semibold text-indigo-300 dark:text-indigo-300">Emily White</h2>
<p class="text-violet-300 dark:text-violet-300">Marketing Specialist</p>
<p class="text-gray-400 text-center mt-2 dark:text-gray-400">Crafting engaging campaigns and analyzing market trends.</p>
<button class="mt-4 px-6 py-2 rounded-full bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 dark:bg-indigo-600 dark:hover:bg-indigo-700">Follow</button>
</div>
</div>
</div>
</div>Composants associés
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.
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.
Composant Profils utilisateur
Il s’agit d’un composant complexe et réactif pour les sites Web d’actualités et de journalisme, doté d’un design inspiré du Bauhaus avec une palette de couleurs vives et sucrées et la prise en charge du mode sombre. Affiche plusieurs profils d’utilisateurs avec des photos de profil, des noms, des titres et le nombre d’abonnés, conçus pour une interface riche.