Componente de botones para compartir en redes sociales
Un componente de botones de compartir en redes sociales receptivo con efectos de glassmorphism, que admite temas claros y oscuros.
Código HTML
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
</a>
<a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
</a>
<a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
</a>
<a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1F2937;
}
}
</style>
Componentes relacionados
Botones para compartir en redes sociales
Botones para compartir en redes sociales con diseño responsivo, compatibilidad con temas oscuros y una estética 3D. No se requiere JavaScript.
Componente de botones para compartir en redes sociales
Componente de botones para compartir en redes sociales para comercio electrónico en modo oscuro usando Tailwind CSS. Simple, receptivo y en escala de grises.
Botones para compartir en redes sociales Componente 51
Un componente receptivo de botones para compartir en redes sociales diseñado con principios de diseño skeuomórficos, con botones que imitan objetos del mundo real y soporte para temas oscuros. El componente se diseña con Tailwind CSS e incluye imágenes de marcador de posición de picsum.photos y avatares de randomuser.me.