Componente de botones para compartir en redes sociales
Un componente receptivo de botones para compartir en redes sociales con un diseño retro / vintage y una combinación de colores pastel, compatible con el modo oscuro y adecuado para interfaces de redes sociales.
Código HTML
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
</div>
<div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
</div>
<div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
</div>
<div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
</div>
<div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
</div>
<div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</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 retro / vintage, combinación de colores en tonos tierra, nivel de complejidad simple y diseño receptivo con soporte para temas oscuros, para fines de redes sociales utilizando 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.
Botones skeuomórficos para compartir en redes sociales
Componente de botones para compartir en redes sociales receptivo con diseño esqueuomórfico, combinación de colores monocromática e interacciones complejas, con soporte para temas oscuros. Diseñado para blogs y sitios de contenido.