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
Composant de profils d’utilisateur avec conception Neumorphism, effets réactifs et prise en charge du thème sombre.
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.
Composant de profils d’utilisateur Neumorphism avec des couleurs vives
Composant de profils d’utilisateur Neumorphism avec des couleurs vives pour les sites Web d’entreprise/d’entreprise, conception réactive avec prise en charge du thème sombre.