Composant Boutons de partage social
Un composant réactif de boutons de partage social avec une conception 3D incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement. Il prend en charge les thèmes sombres avec CSS.
HTML Code
<div class="flex justify-center space-x-4 p-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-blue-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-blue-700">
<i class="fab fa-facebook-f"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Facebook</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-red-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-red-700">
<i class="fab fa-twitter"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Twitter</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-green-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-green-700">
<i class="fab fa-linkedin-in"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on LinkedIn</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40?random=4" alt="Avatar" class="mb-2 rounded-full shadow-lg">
<a href="#" class="transition transform inline-block bg-purple-500 text-white rounded-full p-3 shadow-lg hover:scale-110 hover:shadow-xl dark:bg-purple-700">
<i class="fab fa-instagram"></i>
</a>
<span class="text-gray-700 dark:text-gray-300">Share on Instagram</span>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>Composants associés
Composant Boutons de partage social
Composant avec micro-interactions, schéma de couleurs en niveaux de gris, complexité modérée pour les interfaces de médias sociaux, conception réactive avec prise en charge du thème sombre.
Composant Boutons de partage social
Un composant skeuomorphic social share buttons conçu pour les sites Web de commerce électronique, doté d’une palette de couleurs en niveaux de gris et d’une prise en charge du mode sombre.
Composant Boutons de partage social
Un composant minimaliste de boutons de partage social conçu avec Tailwind CSS, avec des effets réactifs et une prise en charge des thèmes sombres.