Glassmorphism Carte sociale
Un composant de carte sociale glassmorphism simple et réactif avec des couleurs pastel et la prise en charge du mode sombre, adapté aux interfaces de tableau de bord.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 p-4">
<div class="relative w-full max-w-sm overflow-hidden rounded-xl shadow-lg backdrop-blur-md border border-white border-opacity-30 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 p-6 flex flex-col items-center text-center">
<!-- Frosted Glass Effect -->
<div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-gray-700 dark:bg-opacity-10 pointer-events-none transform -skew-y-3 scale-150"></div>
<div class="relative z-10">
<img class="w-24 h-24 rounded-full border-4 border-white border-opacity-40 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
<h3 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Frontend Developer</p>
<div class="flex justify-center space-x-4 mt-5">
<a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.686-.208.686-.464 0-.232-.005-.865-.011-1.696-2.793.602-3.393-1.341-3.393-1.341-.454-1.156-1.11-1.46-1.11-1.46-.908-.619.069-.605.069-.605 1.004.07 1.532 1.03 1.532 1.03.892 1.529 2.341 1.089 2.91.833.091-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.931 0-1.091.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025.798-.222 1.637-.333 2.475-.337.838.004 1.677.115 2.475.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65.64.698 1.028 1.591 1.028 2.682 0 3.829-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.334-.012 2.41-.012 2.737 0 .259.208.567.694.463C21.133 20.19 24 16.425 24 12.017 24 6.484 19.522 2 14 2h-2z"/>
</svg>
</a>
<a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19.633 7.997c-.013-.306-.026-.61-.048-.914-.078-1.066-1.062-2.05-2.128-2.128-.304-.022-.608-.035-.914-.048-1.503-.06-3.007-.06-4.51 0-1.503.06-3.007.06-4.51 0-.306.013-.61.026-.914.048-1.066.078-2.05 1.062-2.128 2.128-.078.304-.09.608-.103.914-.047 1.503-.047 3.007 0 4.51.013.306.026.61.048.914.078 1.066 1.062 2.05 2.128 2.128.304.022.608.035.914.048 1.503.06 3.007.06 4.51 0 1.503-.06 3.007-.06 4.51 0 .306-.013.61-.026.914-.048 1.066-.078 2.05-1.062 2.128-2.128.078-.304.09-.608.103-.914.047-1.503.047-3.007 0-4.51zm-2.106-3.844c.484 0 .878.394.878.878s-.394.878-.878.878-.878-.394-.878-.878.394-.878.878-.878zM12 9.098c-1.603 0-2.902 1.299-2.902 2.902s1.299 2.902 2.902 2.902 2.902-1.299 2.902-2.902-1.299-2.902-2.902-2.902z"/>
</svg>
</a>
<a href="#" class="text-cyan-600 hover:text-cyan-800 dark:text-cyan-300 dark:hover:text-cyan-500 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.273 2.043l-4.512 8.799H9.421L4.898 2.043H2.5A.5.5 0 002 2.543v18.736a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V12.72L10.37 21.057h3.94l4.985-8.318v7.62a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V2.543a.5.5 0 00-.5-.5h-2.247a.5.5 0 00-.5.5v7.05h-.002l-4.636-7.05h-2.738z"/>
</svg>
</a>
</div>
<div class="mt-6 flex justify-around w-full">
<div class="p-2">
<p class="text-lg font-bold text-gray-800 dark:text-gray-100">1.2K</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Followers</p>
</div>
<div class="p-2">
<p class="text-lg font-bold text-gray-800 dark:text-gray-100">350</p>
<p class="text-sm text-gray-600 dark:text-gray-300">Following</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Volet Composantes sociales
Un composant social simple conçu avec un style skeuomorphe utilisant des couleurs vives pour un site d’entreprise professionnel, un design réactif avec prise en charge du mode sombre.
Volet Composantes sociales
Il s’agit d’un composant social complexe et dynamique pour les pages de blog/contenu, axé sur les micro-interactions avec les boutons de partage, les likes, les commentaires et l’enregistrement. Comprend une réactivité complète et la prise en charge du mode sombre.
Volet Composantes sociales
Un composant social brutaliste présentant un design audacieux avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des avatars d’utilisateurs, des liens vers les réseaux sociaux et des images de remplacement.