Carte de profil d’utilisateur neumorphe - Pastel
Une carte de profil utilisateur simple et réactive avec un design neumorphique sur le thème du pastel, adaptée aux portfolios, y compris la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
<div class="w-full max-w-sm rounded-[3rem] p-8 text-center transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100
shadow-[10px_10px_20px_#d1caca,-10px_-10px_20px_#ffffff]
dark:from-gray-700 dark:via-gray-750 dark:to-gray-800
dark:shadow-[10px_10px_20px_#222222,-10px_-10px_20px_#444444]">
<div class="relative w-32 h-32 mx-auto mb-6 rounded-full
shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
dark:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
<img class="w-full h-full object-cover rounded-full p-1 border-4 border-transparent
shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"
src="https://randomuser.me/api/portraits/women/14.jpg" alt="Profile Picture">
<span class="absolute bottom-1 right-1 block w-4 h-4 rounded-full bg-green-400
shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"></span>
</div>
<h2 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">Jane Doe</h2>
<p class="text-md text-pink-600 mb-6 dark:text-pink-300">Creative Designer & Developer</p>
<div class="grid grid-cols-3 gap-4 mb-8">
<div class="p-3 rounded-xl
shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
<p class="text-lg font-semibold text-rose-500 dark:text-rose-300">12</p>
<p class="text-sm text-purple-500 dark:text-purple-200">Projects</p>
</div>
<div class="p-3 rounded-xl
shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
<p class="text-lg font-semibold text-rose-500 dark:text-rose-300">80</p>
<p class="text-sm text-purple-500 dark:text-purple-200">Clients</p>
</div>
<div class="p-3 rounded-xl
shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_444444]">
<p class="text-lg font-semibold text-rose-500 dark:text-rose-300">5</p>
<p class="text-sm text-purple-500 dark:text-purple-200">Awards</p>
</div>
</div>
<div class="flex justify-center space-x-4">
<button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
bg-gradient-to-br from-purple-200 to-pink-200 text-purple-700
shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
dark:from-gray-600 dark:to-gray-700 dark:text-purple-300
dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
View Portfolio
</button>
<button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
bg-gradient-to-br from-pink-200 to-rose-200 text-pink-700
shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
dark:from-gray-700 dark:to-gray-600 dark:text-pink-300
dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
Contact Me
</button>
</div>
</div>
</div>Composants associés
Composant Profils d’utilisateur Art Déco en niveaux de gris
Un composant de profils d’utilisateur réactif avec un design géométrique Art Déco en niveaux de gris, adapté aux sites d’emploi ou aux plateformes de carrière, y compris la prise en charge du 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.
Composant Profils utilisateur
Composant complexe et réactif de profils d’utilisateur conçu pour les sites Web d’alimentation/restaurant, doté d’une interface utilisateur en mode sombre avec des couleurs à contraste élevé. Comprend plusieurs cartes d’utilisateur avec des informations de profil et un appel à l’action.