Rechercher des composants

Catégories

Composants Boutons de partage social

Boutons de partage social

Boutons de partage de contenu sur les réseaux sociaux

Composant Boutons de partage social

Un composant minimaliste de boutons de partage social conçu avec Tailwind CSS, avec une mise en page réactive et une prise en charge du thème sombre. Le composant comprend des boutons de partage sur les plateformes de médias sociaux populaires avec des éléments de conception simples et épurés.

Ouvrir Aperçu

                <div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
        <span class="text-gray-800 dark:text-gray-200">Share with:</span>
    </div>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
    </a>
</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social stylisé avec une esthétique rétro/vintage des années 80/90, avec la prise en charge du thème sombre à l’aide de Tailwind CSS et d’images de remplacement.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

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.

Ouvrir Aperçu

                <div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex space-x-4">
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Facebook
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Twitter
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                LinkedIn
            </a>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
            <a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
                Instagram
            </a>
        </div>
    </div>
</div>