Composant Profils utilisateur
Un composant de profils d’utilisateur conçu dans un style brutaliste avec une palette de couleurs triadique, avec une complexité modérée adaptée à la consommation de blog/contenu, et une conception réactive avec prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Profile 1 -->
<div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
<p class="text-gray-700 dark:text-gray-200">Content Writer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
</p>
<img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 2 -->
<div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
<p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
</p>
<img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
<!-- Profile 3 -->
<div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
<h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
<p class="text-gray-700 dark:text-gray-200">Web Developer</p>
<p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
</p>
<img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
</div>
</div>
</div>
Composants associés
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 d’utilisateur neumorphes
Un composant complexe et réactif de profils d’utilisateurs avec un style de conception neumorphique et une palette de couleurs océan/bleu, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Composant Profils utilisateur
Un composant de profil utilisateur complexe, inspiré de la 3D, conçu pour les systèmes de réservation, avec des neutres froids, une réactivité et une prise en charge du mode sombre.