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.
Código HTML
<div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share via Email</span>
</a>
</div>
</div>Componentes relacionados
Componente de botones para compartir en redes sociales
Un componente de botones para compartir en redes sociales responsivo y minimalista diseñado con un estilo de tipografía suizo/internacional, utilizando un esquema de color en escala de grises. Es adecuado para bolsas de trabajo o plataformas de desarrollo profesional, ya que ofrece opciones de intercambio limpias para varias plataformas de redes sociales.
Componente de botones para compartir en redes sociales
Un componente de botón de compartir en redes sociales receptivo para sitios web de comida/restaurantes, con un degradado de arco iris, microinteracciones al pasar el cursor y soporte completo para el modo oscuro.
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.