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
Composant de boutons de partage social avec un design rétro/vintage, une palette de couleurs de tons de terre, un niveau de complexité simple et un design réactif avec prise en charge du thème sombre, à des fins de médias sociaux à l’aide de Tailwind CSS.
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.
Boutons de partage social Composant 51
Un composant réactif de boutons de partage social conçu selon les principes de conception skeuomorphique, avec des boutons qui imitent des objets du monde réel et prenant en charge le thème sombre. Le composant est stylisé à l’aide de Tailwind CSS et comprend des images de substitution de picsum.photos et des avatars de randomuser.me.