Composant Boutons de partage social
Un composant skeuomorphic social share buttons conçu pour les sites Web de commerce électronique, doté d’une palette de couleurs en niveaux de gris et d’une prise en charge du mode sombre.
HTML Code
<div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share via Email</span>
</a>
</div>
</div>Composants associés
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
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.
Composant Boutons de partage social
Un composant réactif de boutons de partage social conçu dans un style glassmorphism avec une palette de couleurs monochromatiques pour les sites de commerce électronique. Il comporte des éléments translucides givrés ressemblant à du verre, comprend plusieurs boutons interactifs pour le partage sur les réseaux sociaux et prend en charge le mode sombre à l’aide de Tailwind CSS.