Componente de botones para compartir en redes sociales
Un componente minimalista de botones para compartir en redes sociales diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
<span>Facebook</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
<span>Twitter</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
<span>LinkedIn</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
<span>WhatsApp</span>
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #2d3748;
}
.dark\:text-white {
color: #fff;
}
.dark\:hover\:bg-gray-700 {
background-color: #4a5568;
}
}
</style>Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente minimalista de botones para compartir en redes sociales diseñado con Tailwind CSS, con un diseño responsivo y soporte para temas oscuros. El componente incluye botones para compartir en plataformas de redes sociales populares con elementos de diseño limpios y simples.
Botones de compartir en redes sociales de tono tierra skeuomórfico
Un conjunto de botones para compartir en redes sociales con un diseño skeuomórfico y tonos tierra. Las características incluyen diseño responsivo y soporte de modo oscuro con efectos de prensa interactivos al pasar el mouse, construido exclusivamente con clases HTML y Tailwind CSS.
Botones skeuomórficos para compartir en redes sociales
Un conjunto de botones para compartir en redes sociales con un diseño skeuomórfico que utiliza Tailwind CSS. Cuenta con degradados, sombras y efectos de desplazamiento/activos para simular botones físicos. El componente es responsivo e incluye soporte para el modo oscuro a través de CSS. Contiene botones para Facebook, Twitter, LinkedIn y un botón de enlace de copia genérico.