Composants Boutons de partage social Composant Boutons de partage social

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.

Aperçu

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

Un composant réactif de boutons de partage social avec un style de conception skeuomorphe qui imite ses homologues du monde réel, avec la prise en charge du thème sombre.

Ouvrir

Boutons de partage social

Composant de boutons de partage social avec design Glassmorphism, effets réactifs et prise en charge du thème sombre. Aucun JavaScript n’est utilisé.

Ouvrir

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.

Ouvrir