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.
Código HTML
<div class="container mx-auto p-6">
<h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
</div>
<div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
</div>
<div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
</div>
<div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
</div>
<div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
</div>
<div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
<img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
<a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
</div>
</div>
</div>Componentes relacionados
Botones de compartir en redes sociales de tono tierra skeuomórfico
Un conjunto de botones para compartir en redes sociales con un diseño skeuomórfico y tonos tierra. Las características incluyen diseño responsivo y soporte de modo oscuro con efectos de prensa interactivos al pasar el mouse, construido exclusivamente con clases HTML y Tailwind CSS.
Playful_Pastel_Social_Share_Buttons_for_Booking
Un componente complejo, lúdico y divertido de botones para compartir en redes sociales con una combinación de colores pastel, adecuado para sistemas de reserva y reservas. Cuenta con elementos redondeados, estética alegre, capacidad de respuesta total y compatibilidad con el modo oscuro.
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.