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
Composant Boutons de partage social
Composant de boutons de partage social avec un design brutaliste, une palette de couleurs vives et un niveau de complexité complexe pour le commerce électronique, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.
Skeuomorphic Earth Tone Boutons de partage social
Un ensemble de boutons de partage social stylisés dans un design Skeuomorphic utilisant des tons de terre. Les fonctionnalités incluent une mise en page réactive et la prise en charge du mode sombre avec des effets de presse interactifs au survol, construits uniquement avec des classes HTML et Tailwind CSS.
Boutons de partage social
Composant de boutons de partage social réactif avec prise en charge du thème sombre, design brutaliste, schéma de couleurs analogue et interactions complexes, construit avec Tailwind CSS pour un site Web de portfolio.