Composant Profils utilisateur
Il s’agit d’un composant de profil utilisateur simple et réactif pour le commerce électronique avec des micro-interactions, une palette de couleurs complémentaire, une prise en charge du mode sombre et pas de JavaScript.
HTML Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
<div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
<p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
<button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
</div>
</div>
</div>Composants associés
Composant Profils utilisateur
Il s’agit d’un composant complexe et réactif pour les sites Web d’actualités et de journalisme, doté d’un design inspiré du Bauhaus avec une palette de couleurs vives et sucrées et la prise en charge du mode sombre. Affiche plusieurs profils d’utilisateurs avec des photos de profil, des noms, des titres et le nombre d’abonnés, conçus pour une interface riche.
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.