Componente de botones para compartir en redes sociales
Un componente responsivo de botones para compartir en redes sociales con estética retro/vintage de los años 80/90, con soporte para temas oscuros usando Tailwind CSS e imágenes de marcador de posición.
Código HTML
<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
<h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Facebook</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Twitter</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">Instagram</span>
</a>
<a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
<img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
<span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
</a>
</div>
<div class="mt-5">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
</div>
</div>Componentes relacionados
Componente de botones para compartir en redes sociales: música/audio
Un conjunto de botones para compartir en redes sociales diseñados para plataformas de música y audio, con una estética de Material Design con colores apagados y compatibles con el modo oscuro. Incluye botones para plataformas comunes de uso compartido como Facebook, Twitter y correo electrónico.
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 conjunto de vibrantes botones de compartir en redes sociales inspirados en 3D adecuados para sitios web de alimentos y restaurantes, con capacidad de respuesta total y compatibilidad con modo oscuro.