Componentes Botones para compartir en redes sociales Componente de botones para compartir en redes sociales

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.

Vista previa

Código HTML

<div class="flex justify-center items-center space-x-4 bg-gray-900 p-4">
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.79 9.362 8.75 10.346V14.25H6.404V11.89h2.346V9.13c0-2.323 1.4-3.582 3.47-3.582 1.004 0 1.865.076 2.12.11v2.58h-1.53c-1.228 0-1.47.595-1.47 1.467v1.911h2.8L14.2 14.25h-2.8v7.196C18.21 21.362 22 17.083 22 12 22 5.373 17.627 0 12 0z"/>
    </svg>
  </a>
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724c-1.036.617-2.19 1.064-3.427 1.31a4.918 4.918 0 00-8.384 4.482A13.952 13.952 0 011.67 3.148a4.929 4.929 0 001.523 6.574 4.89 4.89 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.99C8.072 14.912 7.6 14.976 7.11 14.992a4.943 4.943 0 004.6 3.438 9.857 9.857 0 01-6.114 2.107c-.398 0-.79-.023-1.175-.068a13.995 13.995 0 007.55 2.209c9.053 0 13.999-7.496 13.999-13.986 0-.19.004-.379.014-.568A10.035 10.035 0 0024 4.557z"/>
    </svg>
  </a>
  <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M20.664 3.703a5.003 5.003 0 00-3.742-2.918c-2.462-.511-4.9-.171-7.127.734-2.495 1.01-4.46 3.098-5.44 5.623C3.43 9.55 3.2 12.268 4 15c.758 2.61 2.517 5.08 5.042 6.106 2.567 1.034 5.82.36 8.11-1.87C19.74 17.775 21.277 15.125 21.6 12.25c.325-2.876-.316-5.69-1.136-8.547zM15.636 15.895a2.837 2.837 0 01-4.159-.129L9.613 13.8l-2.783.67c-.77.185-1.5-.575-1.313-1.354l.67-2.786-1.95-2.05a.964.964 0 01.257-1.35c.3-.273.73-.466 1.2-.53l2.783-.67 1.136-2.61.024-.05c.247-.581.975-.817 1.53-.576a.967.967 0 01.595.89l.67 2.783 2.783-.67c.77-.185 1.5.575 1.313 1.354l-.67 2.786 1.95 2.05a.964.964 0 01-.257 1.35c-.3.273-.73.466-1.2.53l-2.783.67-1.136 2.61-.024.05a.965.965 0 01-.93.682z"/>
    </svg>
  </a>
</div>

Componentes relacionados

Componente de botones para compartir en redes sociales

Componente de botones para compartir en redes sociales para la interfaz de usuario del modo oscuro, utiliza Tailwind CSS, esquema de color en escala de grises, complejidad simple, para fines de cartera, diseño receptivo con soporte para temas oscuros.

Abrir

Componente de botones para compartir en redes sociales

Componente de botones para compartir en redes sociales con microinteracciones, combinación de colores en escala de grises, complejidad moderada para interfaces de redes sociales, diseño receptivo con soporte para temas oscuros.

Abrir

Componente de botones para compartir en redes sociales

Componente de botones para compartir en redes sociales con diseño retro / vintage, combinación de colores en tonos tierra, nivel de complejidad simple y diseño receptivo con soporte para temas oscuros, para fines de redes sociales utilizando Tailwind CSS.

Abrir