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.
Código HTML
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
<h2 class="text-lg font-bold">Share this Post</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
</a>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
<p>Connect with us!</p>
</div>
</div>Componentes relacionados
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.
Botones para compartir en redes sociales
Componente de botones de compartir en redes sociales receptivo con soporte para temas oscuros, diseño brutalista, combinación de colores análoga e interacciones complejas, construido con Tailwind CSS para un sitio web de cartera.
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales de estilo Neumorphism diseñado para sitios web empresariales/corporativos, que utiliza tonos tierra y admite un tema oscuro.