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 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.
Composant Profils utilisateur
Un composant de profils d’utilisateur réactif doté d’un style de conception glassmorphism, avec prise en charge des thèmes sombres et utilisation de Tailwind CSS.
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.