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
Carte de profil utilisateur Neumorphic
Une carte de profil utilisateur simple et réactive avec une esthétique de conception neumorphique utilisant des tons de terre, adaptée aux tableaux de bord. Inclut la prise en charge du mode sombre.
Composant Profils utilisateur
Un composant de profils d’utilisateurs pour les sites Web agricoles, avec un style de design industriel avec des couleurs sourdes, des avatars d’utilisateurs, des rôles et des informations de localisation. Il est réactif et prend en charge le mode sombre.
Composant Profils utilisateur
Une carte de profil d’utilisateur simple et réactive pour une place de marché, avec un design d’inspiration organique/naturelle avec des tons bleus d’entreprise et la prise en charge du mode sombre.