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.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 border-4 border-black dark:border-white shadow-brutalism rounded-none overflow-hidden">
<div class="p-6">
<div class="flex items-center justify-between mb-6">
<h2 class="text-3xl font-bold text-black dark:text-white uppercase">Profiles</h2>
<svg class="w-8 h-8 text-black dark:text-white" 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>
</div>
<div class="space-y-6">
<!-- Profile 1 -->
<div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
<img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar">
<div>
<h3 class="text-xl font-bold text-black dark:text-white uppercase">John Doe</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
</div>
</div>
<!-- Profile 2 -->
<div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
<img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<h3 class="text-xl font-bold text-black dark:text-white uppercase">Jane Smith</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Offline</p>
</div>
</div>
<!-- Profile 3 -->
<div class="flex items-center space-x-4 border-2 border-black dark:border-white p-4 bg-gray-200 dark:bg-gray-700">
<img class="w-16 h-16 object-cover border-2 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div>
<h3 class="text-xl font-bold text-black dark:text-white uppercase">Peter Jones</h3>
<p class="text-sm text-gray-700 dark:text-gray-300">Online</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.shadow-brutalism {
box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 1);
}
.dark .shadow-brutalism {
box-shadow: 8px 8px 0px 0px rgba(255, 255, 255, 1);
}
</style>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
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.
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.