Composantes sociales
Un composant Web présentant un design glassmorphism avec des éléments translucides et des effets de flou semblables à du verre dépoli, des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-500">
<div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-80 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4 text-center">Connect with Us</h2>
<div class="flex items-center justify-around flex-wrap mb-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=1" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 1</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=2" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 2</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/80/80?random=3" alt="User Avatar" class="rounded-full mb-2">
<p class="text-gray-800 dark:text-white">User 3</p>
<a href="#" class="text-blue-500 hover:underline">Follow</a>
</div>
</div>
<div class="text-center">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300">View More</button>
</div>
</div>
</div>Composants associés
Composantes sociales
Un composant social skeuomorphe conçu à des fins de blogs/contenu avec des couleurs vives et la prise en charge du mode sombre.
Volet Composantes sociales
Un composant de médias sociaux réactif avec prise en charge du mode sombre pour les sites Web d’entreprise, avec une palette de couleurs triadique.
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.