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
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
Composant de profils d’utilisateur avec un design brutal, une palette de couleurs monochromatique et une complexité simple à des fins de médias sociaux.
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.