Componente de botones para compartir en redes sociales
Un componente responsivo de botones para compartir en redes sociales diseñado con estilo skeuomórfico en escala de grises para el consumo de contenido del blog. Incluye soporte para modo oscuro.
Código HTML
<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
<div class="flex space-x-4 mb-6">
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>Componentes relacionados
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales con estilo brutalismo, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de botones para compartir en redes sociales
Botones responsivos para compartir en redes sociales con estilo Glassmorphism y colores vibrantes, diseñados para blogs y consumo de contenido.
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales para la interfaz de usuario del modo oscuro, utiliza Tailwind CSS, esquema de color en escala de grises, complejidad simple, para fines de cartera, diseño receptivo con soporte para temas oscuros.