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 réactif des boutons de partage social stylisé avec un design rétro/vintage et une palette de couleurs pastel, prenant en charge le mode sombre et adapté aux interfaces de médias sociaux.
Composant Boutons de partage social
Composant de boutons de partage social pour l’interface utilisateur en mode sombre, utilise Tailwind CSS, schéma de couleurs en niveaux de gris, complexité simple, à des fins de portefeuille, conception réactive avec prise en charge du thème sombre.
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.