Composant Boutons de partage social
Un composant réactif de boutons de partage social stylisé avec des effets de glassmorphism, prenant en charge les thèmes clairs et sombres.
HTML Code
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
</a>
<a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
</a>
<a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
</a>
<a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1F2937;
}
}
</style>
Composants associés
Composant Boutons de partage social
Composant de boutons de partage social pour le commerce électronique en mode sombre à l’aide de Tailwind CSS. Simple, réactif et en niveaux de gris.
Composant Boutons de partage social
Un composant minimaliste de boutons de partage social conçu avec Tailwind CSS, avec une mise en page réactive et une prise en charge du thème sombre. Le composant comprend des boutons de partage sur les plateformes de médias sociaux populaires avec des éléments de conception simples et épurés.
Composant Boutons de partage social
Un composant minimaliste de boutons de partage social conçu pour les tableaux de bord, avec une palette de couleurs vives et un design réactif, avec prise en charge du mode sombre.