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.
HTML Code
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
</div>
<div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
</div>
<div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
</div>
<div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
</div>
<div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
</div>
<div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
</div>
</div>
</div>Composants associés
Composant Boutons de partage social
Un ensemble de boutons de partage social dynamiques, inspirés de la 3D, adaptés aux sites Web de restauration et d’alimentation, avec une réactivité totale et une prise en charge du mode sombre.
Boutons de partage social rétro
Composant de boutons de partage social avec un design rétro/vintage, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS, aucun JavaScript n’est nécessaire.
Composant Boutons de partage social
Boutons de partage social inspirés du Bauhaus pour les applications de sport/fitness, avec des formes géométriques et des tons bleus. Réactif avec prise en charge du mode sombre.