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.
HTML Code
<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
<h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Facebook</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Twitter</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Instagram</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
</a>
</div>
<div class="mt-5">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
</div>
</div>Composants associés
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.
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.
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.