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 de médias sociaux conçu pour un portfolio, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Il comprend des espaces réservés pour les avatars et les noms des utilisateurs.
Volet Composantes sociales
Une carte de réseau social simple et réactive pour le contenu d’actualité/journalisme avec une esthétique industrielle et une palette de couleurs d’automne, y compris la prise en charge du mode sombre.
Volet Composantes sociales
Un composant de médias sociaux de style rétro/vintage doté d’une interface riche avec de multiples éléments interactifs, conçu avec des couleurs complémentaires et prenant en charge le mode sombre.