Composant Boutons de partage social
Un composant réactif de boutons de partage social conçu avec un style skeuomorphique en niveaux de gris pour la consommation de contenu de blog. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
<div class="flex space-x-4 mb-6">
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>Composants associés
Composant Boutons de partage social
Composant avec micro-interactions, schéma de couleurs en niveaux de gris, complexité modérée pour les interfaces de médias sociaux, conception réactive avec prise en charge du thème sombre.
Composant Boutons de partage social
Un composant de boutons de partage social de style Neumorphism conçu pour les sites Web d’entreprise, utilisant des tons de terre et prenant en charge un thème sombre.
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.