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 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.
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.
Composant Profils utilisateur
Un composant de profils d’utilisateurs conçu dans un style brutaliste à l’aide de Tailwind CSS, avec une palette de couleurs monochromatiques et fournissant une interface pour les réseaux sociaux. Il prend en charge le mode sombre et est réactif.