Componentes Botones para compartir en redes sociales Botones para compartir en redes sociales Componente 51

Botones para compartir en redes sociales Componente 51

Un componente receptivo de botones para compartir en redes sociales diseñado con principios de diseño skeuomórficos, con botones que imitan objetos del mundo real y soporte para temas oscuros. El componente se diseña con Tailwind CSS e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de botones para compartir en redes sociales

Componente de botones para compartir en redes sociales con diseño brutalista, combinación de colores vibrantes y nivel de complejidad complejo para el comercio electrónico, con diseño receptivo y soporte de tema oscuro utilizando Tailwind CSS. Sin JavaScript.

Abrir