Composant Profils utilisateur
Glassmorphism Composant de profil utilisateur avec palette de couleurs monochromatique et complexité simple.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
<div class="px-6 py-8">
<div class="flex justify-center">
<img class="h-24 w-24 rounded-full border-4 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
</div>
<div class="mt-4 text-center">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">Web Developer</p>
</div>
<div class="mt-6 flex justify-center space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.917 3.187 9.165 7.62 10.692.55.1 1.05-.25 1.05-.56V20.23c-3.03.65-3.676-1.44-3.676-1.44-.59-.15-1.21-.45-1.44-.66-.42-.36-.33-.04-.05-.03.33.03.53.27.53.27.2 1.52 1.25 1.05 1.55.8.04-.63.23-1.05.42-1.29-2-.23-4.1-.1-4.1-4.42 0-.98.35-1.86 1.02-2.5.1-.21-.45-1.25.1-2.62 0 0 .84-.27 2.75 1.02.8-.23 1.65-.34 2.5-.35.85.01 1.7.12 2.5.35 1.9-.29 2.75-1.02 2.75-1.02.56 1.37.1 2.41.1 2.62.67.64 1.02 1.52 1.02 2.5 0 4.33-2.07 4.71-4.11 4.42-.29.25-.58.48-.9.69-.23.16-.5.2-.82.1-.48-.15-1.05.5-1.05.5V22.11c0 .31.5.66 1.05.5C19.818 21.182 23 16.934 23 12.017 23 6.484 18.522 2 13 2h-1z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c7.5 0 11.675-6.253 11.675-11.675 0-.178 0-.35-.012-.523A8.134 8.134 0 0022 5.92a8.171 8.171 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.222 8.222 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
Composants associés
Glassmorphism Composant Profils Utilisateur (Simple)
Un composant de profil utilisateur simple et réactif avec un style de conception glassmorphism, une palette de couleurs pastel et une prise en charge du mode sombre. Idéal pour les plateformes de divertissement/médias.
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.
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.