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 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 profil utilisateur réactif utilisant Tailwind CSS, avec des influences de Material Design et une palette de couleurs monochromatique. Prend en charge le mode sombre et affiche les informations de l’utilisateur, les statistiques et l’activité récente.
Carte de profil utilisateur Neumorphic
Une carte de profil utilisateur simple et réactive avec une esthétique de conception neumorphique utilisant des tons de terre, adaptée aux tableaux de bord. Inclut la prise en charge du mode sombre.