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
Un composant réactif de boutons de partage social stylisé avec une esthétique rétro/vintage des années 80/90, avec la prise en charge du thème sombre à l’aide de Tailwind CSS et d’images de remplacement.
Boutons de partage social
Composant de boutons de partage social avec design Glassmorphism, effets réactifs et prise en charge du thème sombre. Aucun JavaScript n’est utilisé.
Composant Boutons de partage social
Un composant réactif et minimaliste des boutons de partage social conçu avec un style de typographie suisse/international, en utilisant une palette de couleurs en niveaux de gris. Il convient aux sites d’emploi ou aux plateformes de développement de carrière, offrant des options de partage propres pour diverses plateformes de médias sociaux.