Componente de botones para compartir en redes sociales
Un componente skeuomórfico de botones para compartir en redes sociales diseñado para sitios web de comercio electrónico, con un esquema de color en escala de grises y compatibilidad con el modo oscuro.
Código HTML
<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>Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente receptivo de botones para compartir en redes sociales con un estilo de diseño esqueuomórfico que imita a sus contrapartes del mundo real, con soporte para temas oscuros.
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales retro/vintage con una combinación de colores monocromática. Es un diseño complejo y responsivo con soporte para temas oscuros, adecuado para un portafolio. Utiliza Tailwind CSS sin JavaScript.
Botones retro para compartir en redes sociales
Componente de botones para compartir en redes sociales con diseño retro / vintage, efectos responsivos y soporte de temas oscuros con Tailwind CSS, no se necesita JavaScript.