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.
Código HTML
<div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
<div class="flex items-center space-x-2">
<img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
<span class="text-gray-800 dark:text-gray-200">Share with:</span>
</div>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
</a>
<a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
<img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
</a>
</div>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 efectos responsivos y compatibilidad con temas oscuros.
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.
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.