Rechercher des composants

Catégories

Composants Boutons de partage social

Boutons de partage social

Boutons de partage de contenu sur les réseaux sociaux

Composant Boutons de partage social

Boutons de partage social inspirés du Bauhaus pour les applications de sport/fitness, avec des formes géométriques et des tons bleus. Réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg p-5 sm:p-7 md:p-8 border-4 border-blue-600 dark:border-blue-300 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <h2 class="text-2xl sm:text-3xl font-extrabold text-center text-blue-800 dark:text-blue-200 mb-6 sm:mb-8 tracking-tighter sm:tracking-normal">
      Share This Victory!
    </h2>

    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:gap-8 justify-items-center">
      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 border-b-4 border-l-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.046 0h-19.109c-1.552 0-2.936 1.257-2.936 2.766v18.261c0 1.509 1.384 2.767 2.936 2.767h19.109c1.552 0 2.936-1.258 2.936-2.767v-18.261c0-1.509-1.384-2.766-2.936-2.766zm-3.094 17.561h-2.996v-5.607h2.996v5.607zm-.008-6.892c-.114-.492-.562-.835-1.047-.835-.615 0-1.047.464-1.047 1.093v3.744h-2.996v-12.721h2.996v1.921c.542-.782 1.385-1.353 2.502-1.353 1.83 0 3.257 1.341 3.257 4.254v7.899h-2.996l-.004-.007z"/>
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">LinkedIn</span>
      </a>

      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:translate-y-1 hover:scale-105 border-t-4 border-r-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:-rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.297 22V12.441H5.197V8.502H8.297V5.792c0-3.076 1.893-4.764 4.657-4.764 1.325 0 2.479.098 2.812.142v3.238l-1.916.001c-1.502 0-1.796.714-1.796 1.764v2.302h3.587l-.467 3.939h-3.12V22H8.297z"/>
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Facebook</span>
      </a>

      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 border-t-4 border-l-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.89-.982-2.172-1.597-3.597-1.597-2.71 0-4.918 2.203-4.918 4.917 0 .386.046.764.129 1.127-4.093-.205-7.72-2.173-10.158-5.17A4.814 4.814 0 00.316 9.17c0 1.701.866 3.209 2.188 4.096-.807-.025-1.564-.247-2.222-.614v.061c0 2.385 1.696 4.372 3.946 4.827-.413.111-.849.171-1.296.171-.318 0-.626-.031-.925-.088.636 1.956 2.46 3.392 4.604 3.432-1.685 1.321-3.805 2.125-6.102 2.125-.398 0-.79-.023-1.173-.069 2.18 1.393 4.768 2.207 7.55 2.207 9.053 0 13.99-7.495 13.99-13.988 0-.214-.004-.426-.012-.637.962-.695 1.797-1.562 2.457-2.558z"/>
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Twitter</span>
      </a>

      <a href="#" class="group w-full max-w-[200px] aspect-square rounded-none bg-blue-500 dark:bg-blue-700 flex flex-col items-center justify-center p-3 sm:p-4 text-white hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-300 ease-in-out transform hover:translate-y-1 hover:scale-105 border-b-4 border-r-4 border-blue-700 dark:border-blue-900">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 mb-2 sm:mb-3 group-hover:-rotate-6 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.316 3.051l1.652 4.148 4.475.385c.677.058.956.883.475 1.38L16.51 12.396l.992 4.316c.162.705-.623 1.256-1.258.913L12 14.286l-3.244 1.839c-.636.343-1.42-.208-1.258-.913l.992-4.316-3.798-3.931c-.48-.497-.201-1.322.475-1.38l4.475-.385 1.652-4.148a.75.75 0 011.378 0z" clip-rule="evenodd" />
        </svg>
        <span class="text-xs sm:text-sm font-bold uppercase tracking-wide">Share</span>
      </a>
    </div>

    <p class="mt-8 text-center text-sm text-blue-700 dark:text-blue-400 font-medium opacity-80">
      Connect with us and celebrate winning moments!
    </p>
  </div>
</div>

Composant Boutons de partage social

Un ensemble de boutons de partage de médias sociaux conçus avec une esthétique monospace/développeur, une palette de couleurs bleues d’entreprise et une réactivité totale. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-['Menlo',_monospace] bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-2xl mx-auto rounded-lg shadow-xl overflow-hidden border border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-800">
    <div class="p-6 border-b border-blue-100 dark:border-blue-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2 leading-tight">
        <span class="text-blue-600 dark:text-blue-400">//</span> Share this article
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Spread the word about our latest insights and news.</p>
    </div>
    <div class="p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.29 20.44c-1.39 0-2.5-1.12-2.5-2.5s1.11-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.11 2.5-2.5 2.5zm11.71-8.56c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-4.75-.41c-2.32 0-4.22 1.84-4.25 4.16.89-.96 2.11-1.5 3.39-1.5 1.28 0 2.5.54 3.39 1.51-.03-2.32-1.93-4.17-4.25-4.17zm1.75-6c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zm-9.5 0c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zM12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12a10.001 10.001 0 008.883 9.957v-7.042h-2.35V12h2.35V9.42c0-2.324 1.416-3.593 3.49-3.593 1.002 0 1.868.075 2.12.108v2.441l-1.448.001c-1.132 0-1.353.538-1.353 1.326V12h2.7v2.915h-2.7V22C17.523 22 22 17.523 22 12S17.523 2 12 2z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          <path fill-rule="evenodd" d="M9.208 2.047a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zm5.5-16.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zM12 4a8 8 0 100 16 8 8 0 000-16zM3 12a9 9 0 119 9A9.004 9.004 0 013 12zm2 0a7 7 0 1014 0 7 7 0 00-14 0zm10.5-5.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm5.5 11a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Instagram</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.564-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 3.5c-4.99 0-9.04 4.05-9.04 9.04 0 4.98 4.05 9.04 9.04 9.04 4.98 0 9.04-4.06 9.04-9.04C21.08 7.55 17.03 3.5 12.04 3.5zM15.42 16.5c-.32.06-.5-.17-.6-.24l-2.07-1.42c-.22-.15-.43-.3-.43-.65V8.5h.01c.28 0 .42-.14.42-.42 0-.29-.14-.42-.42-.42-.29 0-.42.14-.42.42v5.77c0 .12.04.23.08.31.05.07.13.1.28.21.14.09.28.18.42.26l2.1 1.44c.48.33.67.55.51.9-.19.4-.55.52-.92.42zm-3.38-2.61c.42-.29.54-.78.29-1.2l-2.82-4.9c-.29-.5-.88-.65-1.39-.36-.5.29-.65.88-.36 1.39l2.82 4.9c.29.5.88.65 1.39.36z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19.9 22.4L20 22.5c.3.3.4.7.4 1.1s-.1.8-.4 1.1L20 25c-.2.2-.4.4-.7.4s-.5.0-.7-.1c0 0-.1-.1-.1-.1-.1-.1-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2s-.1-.2-.1-.3c-.1-.1-.1-.2-.1-.3s-.1-.2-.1-.3c0-.1-.1-.2-.1-.2s0-.2-.1-.3c0 0-.1.0-.1.0-.1 0-.1.0-.1-.1-.1-.1-.1-.1 0-.1s.1-.1.2-.1c0-.1.1-.1.2-.1.1-.1.1-.1.2-.1s.1-.1.2-.1h.2c0 0-.1 0-.1.1-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1-.1-.1-.2-.2-.2-.1-.1-.1-.1-.2-.1h-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.2-.1s.1-.1.2-.1c.1 0 .1-.1.2-.1h.2c.1-.1.2-.1.3-.1.1-.1.1-.1.2-.1h.2c.1 0 .1-.1.2-.1.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.1 0h-.1c0 0-.1.0-.1.0-.1.0-.1.0-.1.0-.1.1-.1.1-.1.1-.1.0-.1.0-.2.0-.1.1-.1.1-.2.1-.1.0-.1.0-.1.1-.1.0-.1.0-.1.1c-.1.0-.1.0-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.0.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-1.2-1.2h-11.8v-20.1h15v11.8c.0.0.1.1.1.1.1.1.2.2.2.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.1.2.1.2.1.1.1.2.1.2.1 0 .2.0.2.1.1.0.1.0.2.1.1 0 .1.0.2.0.1.0.1.0.2.0.2-.1.1.0.1.0.2-.1.0-.1.0-.2.0-.1-.1-.1.0-.2-.1-.1-.0-.1-.1-.2-.1-.0-.1-.1-.2-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1h-.1c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2h-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2L0 12l2.3-2.3C2.1 9.5 2.1 9.4 2.1 9.4c.1-.1.1-.1.1-.1.1-.1.1-.1.1-.2.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1l-.1-.1h-5.2v2.3h5.1l-.1.1c.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.2.2.3.3.4.1.1.2.2.4.3.1.1.3.2.4.2.1.1.3.2.4.2.1 0 .2.0.3.1.1.0.2.0.3.1.1.0.2.0.3.1.1.0.2.0.2.0.1.0.1-.1.1-.1.1-.0.1-.1.1-.1 0-.1.0-.1.0-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1zM11.6 4.3L12 4.7l-7.7 7.7L4 12V2.5c0-.6.5-1.1 1.1-1.1h5.8c.6 0 1.1.5 1.1 1.1v.8l-.4.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.3-.1.4s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 0 0 .1-.1.1zM22.5 1.1H16.7L19 3.4l-.1.1c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.0-.1.1-.1.1s-.1.1-.1.1l-.1.1h-2.3c-.6 0-1.1.5-1.1 1.1v5.8c0 .6.5 1.1 1.1 1.1h10.9c.6 0 1.1-.5 1.1-1.1V2.5c.0-.6-.5-1.1-1.1-1.1z" transform="translate(0 -1)"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.336 8.797c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C17.969 5.097 17.59 5 17.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM16.89 12.015c-1.396 0-2.529.479-3.414 1.436-.886.957-1.329 2.15-1.329 3.58 0 1.43.443 2.625 1.329 3.581.885.956 2.018 1.434 3.414 1.434 1.39 0 2.518-.479 3.385-1.432.868-.953 1.302-2.147 1.302-3.583 0-1.423-.434-2.618-1.302-3.588-.867-.97-1.995-1.45-3.385-1.45zm0-.5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-16.89 5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-.5-5c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C5.969 5.097 5.59 5 5.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM5.16 3.5c-.328 0-.62.062-.876.185-.257.124-.469.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zm11.734 0c-.328 0-.62.062-.876.185-.257.124-.47.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zM12 9.015c-.78 0-1.49.208-2.13.626-.63.417-1.11 1.01-1.44 1.776-.33.766-.495 1.579-.495 2.433 0 .848.165 1.66.495 2.43.33.77.81 1.36 1.44 1.78.64.417 1.35.625 2.13.625.78 0 1.49-.208 2.13-.625.63-.418 1.11-1.01 1.44-1.78.33-.77.495-1.57.495-2.43 0-.854-.165-1.667-.495-2.433-.33-.766-.81-1.359-1.44-1.776-.64-.418-1.35-.626-2.13-.626z"/>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
      </a>
    </div>
    <div class="p-6 border-t border-blue-100 dark:border-blue-700 text-sm text-gray-500 dark:text-gray-400">
      <p>Tip: Click to share. More options coming soon.</p>
      <p class="mt-2 text-blue-500 dark:text-blue-400"><span class="text-blue-600 dark:text-blue-500">guest@website</span>:$ <span class="animate-pulse">_</span></p>
    </div>
  </div>
</div>

Composant Boutons de partage social

Un composant réactif et minimaliste des boutons de partage social conçu avec un style de typographie suisse/international, en utilisant une palette de couleurs en niveaux de gris. Il convient aux sites d’emploi ou aux plateformes de développement de carrière, offrant des options de partage propres pour diverses plateformes de médias sociaux.

Ouvrir Aperçu

                <div class="font-sans bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 text-center tracking-tight">Share Job Opportunity</h2>
  <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">Help others discover this exciting role. Share it with your network!</p>
  
  <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">

    <!-- LinkedIn -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-blue-700 dark:text-blue-500 group-hover:text-blue-800 dark:group-hover:text-blue-400" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zM.02 24h4.96V8.12H.02V24zM9.01 7.9H13.9C13.9 7.9 14.18 7.55 14.07 6.45C13.94 4.09 11.45 3.5 10.63 3.5C8.83 3.5 7.14 4.41 7.01 7.9L9.01 7.9C9.01 7.9 9.01 7.9 9.01 7.9zM7.05 9.9H9.01V24H7.05V9.9zM19.01 7.9H24.01V24H19.01V7.9zM19.01 7.9C19.01 7.9 19.38 7.01 19.74 6.78C20.61 6.13 21.41 6.09 21.84 6.09C22.28 6.09 23.36 6.09 23.36 6.09V3.5h-5.18C17.72 3.5 14.7 3.5 13.9 3.5C13.06 3.5 11.41 3.73 10.74 4.88C10.05 6.03 10.01 7.9 10.01 7.9H19.01V7.9z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
    </a>

    <!-- Twitter/X -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21F10 16.92V11.25L4.47 2.25H1.5L9.303 12.875L1.07 21.75H8.9L14.542 13.625l5.666 8.125h3.407L16.2 8.725L18.244 2.25h-0.001zm-0.403 1.344l-5.632 6.745l-3.326-6.745H2.8l7.545 10.79L2.534 21.75h3.385l5.63-6.745l3.326 6.745h6.635l-7.547-10.79L21.196 2.25h-2.95z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter/X</span>
    </a>

    <!-- Facebook -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15.42 16.9v-2.31h2.51l.39-2.78H15.42V9.69c0-.66.2-1.12 1.15-1.12h1.22V5.41s-1.1-.19-2.16-.19c-2.2 0-3.6 1.34-3.6 3.73v2.09h-2.45v2.78h2.45V24h5.02V16.9h-1.9zM12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
    </a>

    <!-- Email -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
      <svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
    </a>

    <!-- WhatsApp (on mobile/tablet) -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 col-span-2 lg:col-span-1">
      <svg class="h-5 w-5 mr-2 text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.04 2C7.34 2 3.58 5.76 3.58 10.46c0 1.5.4 2.94 1.16 4.22L3 21l6.3-1.65a8.48 8.48 0 005.14 1.83c4.7 0 8.46-3.76 8.46-8.46S16.74 2 12.04 2zM17.2 15.6c-.19.3-.74.6-1.04.6-.29 0-.58-.1-.85-.3L14.2 14.7c-.24-.13-1.47-.7-1.7-.85-.23-.15-.4-.2-.58.2-.18.4-.7.8-.85.96-.15.15-.3.2-.5.2-.2 0-.38-.07-.5-.15-.17-.11-.74-.27-.9-.45-.15-.15-.36-.45-.5-.7-.14-.23-.05-.4-.05-.6 0-.2.15-.3.2-.38.05-.08.1-.15.2-.2.1-.08.2-.15.3-.2.08-.06.12-.1.17-.18.06-.08.12-.2.17-.28.05-.08.1-.17.15-.25.04-.08.06-.13.06-.2 0-.05-.02-.1-.04-.13-.02-.03-.1-.08-.18-.17-.08-.1-.13-.15-.2-.2-.07-.07-.15-.1-.23-.17-.08-.07-.17-.15-.25-.23-.08-.08-.15-.15-.23-.2-.07-.06-.05-.1-.05-.17 0-.08-.0-.14.1-.2.2-.23.47-.5.7-.7.2-.2.4-.3.6-.5.2-.2.37-.3.5-.4-.1.1-.2.2-.3.3-.2.2-.4.3-.6.5-.2.2-.2.3-.2.5 0 .2.1.4.1.4.1.2.2.3.4.5.2.2.3.2.4.2.2 0 .4-.07.6-.07.2 0 .3-.1.4-.2.1-.06.15-.1.2-.1.2-.1.4-.2.6-.3.2-.1.3-.2.4-.2.2-.07.3-.1.4-.1.2 0 .4.07.6.07.2 0 .4.03.6.07.2.1.4.2.5.3.1.06.2.1.2.1.15.1.2.16.2.2.06.07.2.17.2.3.06.1.1.2.17.3l.05.08c.1.2.1.4.1.6 0 .2-.06.4-.13.6-.07.2-.16.4-.25.5-.09.2-.17.3-.28.4l-.08.05c-.1.08-.2.15-.3.2-.1.1-.2.15-.3.2-.2.1-.4.2-.6.3-.2.1-.3.2-.5.3-.2.1-.4.2-.6.2-.2 0-.4.02-.6.02-.27 0-.5-.03-.7-.1.0-.08 0-.15 0-.23z"/>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
    </a>

    <!-- Copy URL -->
    <button aria-label="Copy link to clipboard" class="flex items-center justify-center p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 group focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 col-span-2 lg:col-span-3" onclick="navigator.clipboard.writeText('https://your-job-link.com/job-id').then(function() { alert('Link copied to clipboard!'); });">
      <svg class="h-5 w-5 mr-2 text-gray-600 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
      </svg>
      <span class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
    </button>

  </div>
</div>

Composant Boutons de partage social - Musique/Audio

Un ensemble de boutons de partage social conçus pour les plateformes musicales et audio, avec une esthétique Material Design avec des couleurs sourdes et prenant en charge le mode sombre. Comprend des boutons pour les plateformes de partage courantes telles que Facebook, Twitter et E-mail.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Share This Track</h3>
  <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">

    <!-- Facebook Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-blue-300 hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Facebook">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.64-.75 10-5.494 10-10z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Facebook</span>
    </a>

    <!-- Twitter Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-sky-300 hover:bg-sky-400 dark:bg-sky-600 dark:hover:bg-sky-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on Twitter">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.007-.531.807-.582 1.515-1.31 2.072-2.124-.741.329-1.532.547-2.35.648a4.332 4.332 0 001.956-2.269c-.767.429-1.62.735-2.514.896a4.36 4.36 0 00-7.712 2.923c0 .337.04.668.12 1.0H3.38c-.374 0-.742-.03-.9-.08C2.56 12.378 2 13.9 2 15.467c0 2.2.945 4.14 2.44 5.234A4.326 4.326 0 012 19.129c.655.109 1.3.178 1.954.178.69 0 1.36-.088 2.01-.256C5.58 20.088 6.94 20.251 8.29 20.251z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Twitter</span>
    </a>

    <!-- Email Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-teal-300 hover:bg-teal-400 dark:bg-teal-600 dark:hover:bg-teal-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share via Email">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M.05 3.555A2 2 0 012 2h20a2 2 0 011.95 1.555L12 12.032.05 3.555zM0 4.67V19a2 2 0 002 2h20a2 2 0 002-2V4.67l-12 7.7L0 4.67z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Email</span>
    </a>

    <!-- WhatsApp Share Button -->
    <a href="#" class="flex items-center justify-center p-3 rounded-lg bg-green-300 hover:bg-green-400 dark:bg-green-600 dark:hover:bg-green-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105"
      aria-label="Share on WhatsApp">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12.046 2c-5.466 0-9.917 4.451-9.917 9.917 0 1.758.463 3.447 1.341 4.93L.5 22.5l5.068-1.579c1.42.793 3.023 1.258 4.708 1.258 5.467 0 9.917-4.451 9.917-9.917C21.963 6.45 17.512 2 12.046 2zm0 1.83c4.462 0 8.087 3.626 8.087 8.087 0 4.46-3.625 8.086-8.087 8.086-1.585 0-3.08-.458-4.364-1.25l-.265-.157-2.75 1.0L5.3 18.067l-.173-.284c-.878-1.425-1.353-3.03-1.353-4.733.001-4.461 3.626-8.086 8.087-8.086zm.135 3.42c-2.274 0-3.238 1.905-3.32 2.01-.06.07-.37.178-.506.11-.137-.067-.384-.14-.543.08-.22.29-.444.6-.607.78-.17.18-.344.382-.09.845.248.463.78 1.054 1.455 1.62.903.75 1.761 1.052 2.378 1.15.58.093 1.077.067 1.488-.168.411-.234.8-1.006 1.107-1.493.307-.487.31-.6.216-.78-.094-.18-.266-.43-.377-.57-.11-.14-.236-.26-.118-.46.118-.2.83-.997.94-.997.108 0 .61.08.7.207.088.127.568 1.54 1.077 1.85.51.31 1.218.423 1.246.257.03-.166-.35-.607-.78-1.43z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">WhatsApp</span>
    </a>

    <!-- Copy Link Button -->
    <button onclick="copyToClipboard('https://example.com/track-link')" class="flex items-center justify-center p-3 rounded-lg bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50"
      aria-label="Copy link to clipboard">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M15 10c0 .552-.448 1-1 1H8c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h6c.552 0 1 .448 1 1v4z" />
        <path fill-rule="evenodd" d="M9 20h9c1.105 0 2-.895 2-2V8h-2v10H9v2zm-4 0h9V6c0-1.105-.895-2-2-2H5c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2zm2-14h6.002a2 2 0 011.996 2v6.002a2 2 0 01-2 2H7.002a2 2 0 01-2-2V8.002a2 2 0 012-2z" clip-rule="evenodd" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">Copy Link</span>
    </button>

    <!-- More Options Button -->
    <button class="flex items-center justify-center p-3 rounded-lg bg-indigo-300 hover:bg-indigo-400 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white shadow-md transition duration-200 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
      aria-label="More sharing options">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 5a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
      </svg>
      <span class="text-sm font-medium hidden sm:inline">More</span>
    </button>
  </div>

  <!-- Optional: Hidden input for copy to clipboard functionality -->
  <input type="text" id="trackLinkInput" class="absolute opacity-0 pointer-events-none" value="">

  <script>
    function copyToClipboard(text) {
      const input = document.getElementById('trackLinkInput');
      input.value = text;
      input.select();
      document.execCommand('copy');
      alert('Link copied to clipboard!'); // Simple feedback for user
    }
  </script>
</div>

Composant Boutons de partage social

Un composant de bouton de partage social réactif pour les sites Web d’alimentation/restaurant, avec un dégradé arc-en-ciel, des micro-interactions au survol et une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-2xl font-extrabold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Share This Delicious Food!
    </h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
      <!-- Facebook Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-blue-600 to-blue-800 text-white
                  dark:from-blue-700 dark:to-blue-900">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M17 2H7a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5zm-1.8 7.2h-2.1v-1.7c0-.5.2-.8.8-.8h1.3V6.2h-2.1c-2.4 0-3 1.8-3 3v2.2H8.9v2.8h1.6V20h3.2v-5.8h1.6l.3-2.8h-1.9v-2c0-.7.3-1.1 1.2-1.1z" />
        </svg>
        <span class="sr-only">Share on Facebook</span>
      </a>

      <!-- Twitter Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-sky-400 to-cyan-600 text-white
                  dark:from-sky-500 dark:to-cyan-700">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.24 3.7 C17.38 4.6 15.65 5.56 12.87 5.7 C11.3 4 9.17 3 6.78 3 c-3.57 0-6.49 2.92-6.49 6.5 S3.21 16 6.78 16 c1.79 0 3.44-.68 4.7-1.85 l.3 2.15 h-3.23 C5.06 16.3 3.6 17.76 3.6 19.5 s1.46 3.2 3.2 3.2 H14.6 c1.74 0 3.2-1.46 3.2-3.2 0-1.74-1.46-3.2-3.2-3.2 H11.4 L11 11.5 h5.2 c.72 0 1.28-.56 1.28-1.28 V8.4 c0-.72-.56-1.28-1.28-1.28 h-5.8 l-.5-1.95 C12.28 4.4 13.9 3.5 15.9 3.5 c1.18 0 2.27.35 3.16.94 L18.24 3.7 M6.78 5.7 c.73 0 1.4.16 2 .46 -.6-.26-1.28-.4-1.98-.4 c-3.13 0-5.69 2.56-5.69 5.7 S3.65 17 6.78 17 c1.36 0 2.6-.48 3.56-1.25 L9.6 14.8 c-.8 0-1.5-.16-2.1-.46 C6.7 14 6.2 13.7 5.8 13.2 l-.35-.35 c-.46-.46-1.07-.7-1.72-.7 -1.25 0-2.28 1.03-2.28 2.28 s1.03 2.28 2.28 2.28 c.83 0 1.58-.45 1.95-1.12 C6.2 15.9 6.5 15.6 6.78 15.6 L6.78 5.7 z" />
        </svg>
        <span class="sr-only">Share on Twitter</span>
      </a>

      <!-- WhatsApp Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-green-500 to-teal-500 text-white
                  dark:from-green-600 dark:to-teal-600">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 2.2 C6.55 2.2 2.17 6.6 2.17 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.04 22 c5.49 0 9.87-4.4 9.87-9.9 C21.91 6.6 17.53 2.2 12.04 2.2 M17 15.1 c-.2.1-.4.2-.6.2-.2 0-.4-.1-.5-.1-.2-.1-.5-.2-.7-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.2-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0 0 0c-.1 0-.1 0 0 0-.1 0-.1 0 0 0h-.1s0-.1 0-.1c0-.1 0-.1 0-.1c-.1 0-.1 0-.1-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1-.1-.2-.1s-.1-.1-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1-.1l-.1-.1C4.4 17.5 4 15.8 4 14.1c0-2.8.9-5.1 2.3-6.9 1.4-1.8 3.3-2.8 5.4-2.8S15.1 5.4 16.5 7.2c1.4 1.8 2.3 4.1 2.3 6.9 0 2.8-.9 5.1-2.3 6.9-1.4 1.8-3.3 2.8-5.4 2.8-2.1 0-4.1-.9-5.4-2.8l-.1-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.1-.2-.1.2-.2.2-.2c-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.1-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1-.1c-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0V11.2c0-.5.2-.8.5-.8h.1c.3.1.5.3.6.5.1.2.2.3.4.5.1.2.3.4.4.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5h.1c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3l-3.2-1.9c-.3-.2-.5-.3-.7-.4-.3-.1-.5-.2-.8-.3-.2-.1-.5-.2-.7-.3l-1.3-.8c-.1-.1-.3-.2-.4-.2-.2-.1-.4-.1-.6-.2-.2-.1-.4-.2-.6-.2-.2 0-.3-.1-.5-.1-.2-.1-.4-.1-.6-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4-.1-.5-.1C7.1 11 6.9 11 6.8 11.2c-.1.2-.1.4-.1.6s.1.4.2.6l1.3 2.2c.2.3.4.6.6.9.2.3.4.5.6.8.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9q.2-.3.4-.6c.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9v-.1c.1-.1.2-.3.3-.4l-.2-.3c.1-.1.2-.2.3-.3.1-.1.3-.2.4-.2.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3s.3-.2.5-.3a5.5 a5.5 0 00-.7-.4c-.2-.1-.4-.2-.5-.3z" />
        </svg>
        <span class="sr-only">Share on WhatsApp</span>
      </a>

      <!-- Email Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-orange-400 to-red-500 text-white
                  dark:from-orange-500 dark:to-red-600">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 C2.5 6 2.3 6.1 2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2 M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 L2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2" />
        </svg>
        <span class="sr-only">Share via Email</span>
      </a>

      <!-- Pinterest Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-red-600 to-red-800 text-white
                  dark:from-red-700 dark:to-red-900">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.01 2.2 C6.53 2.2 2.15 6.6 2.15 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.01 22 c5.48 0 9.87-4.4 9.87-9.9 C21.88 6.6 17.5 2.2 12.01 2.2 M17.7 10.4 c-.4 1.7-.5 2.5-.9 3.8-1.1 3.5-3.5 5.5-6.6 5.5-2.2 0-3.6-1.1-4.2-2.1-.8-1.3-.9-2.5-.9-3.8 0-1.2.2-2.3.6-3.4 1-2.9 3.5-5 6.7-5 2.5 0 4.1.8 4.7 1.9.7 1.1.9 2.5.4 4.1zm-4.7-2.7c-1.2 0-2.2.4-2.8 1.1-.6.7-.8 1.6-.8 2.5s.2 1.8.8 2.5c.6.7 1.6 1.1 2.8 1.1 1.2 0 2.2-.4 2.8-1.1.6-.7.8-1.6.8-2.5s-.2-1.8-.8-2.5c-.6-.7-1.6-1.1-2.8-1.1z" />
        </svg>
        <span class="sr-only">Share on Pinterest</span>
      </a>

      <!-- Link Copy Button -->
      <button type="button" aria-label="Copy link" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-purple-500 to-indigo-600 text-white
                  dark:from-purple-600 dark:to-indigo-700">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4 C8.68 4 6 6.68 6 10 s2.68 6 6 6 c.5 0 .9-.4 1-.9.1-.5-.2-1-.7-1.1-.3-.1-.5-.1-.7-.1-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4c0 1.1-.5 2.1-1.3 2.8-.4.4-.4 1-.1 1.4.3.4.9.5 1.3.2 1.1-1 1.8-2.5 1.8-4.4 C18 6.68 15.32 4 12 4 M12 20 c-3.32 0-6-2.68-6-6 s2.68-6 6-6 c.5 0 .9.4 1 .9.1.5-.2 1-.7 1.1-.3.1-.5.1-.7.1-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4c0-1.1-.5-2.1-1.3-2.8-.4-.4-.4-1-.1-1.4.3-.4.9-.5 1.3-.2 1.1 1 1.8 2.5 1.8 4.4 C18 17.32 15.32 20 12 20 z" />
        </svg>
        <span class="sr-only">Copy link</span>
      </button>
    </div>
  </div>
</div>

Composant Boutons de partage social

Un ensemble de boutons de partage social dynamiques, inspirés de la 3D, adaptés aux sites Web de restauration et d’alimentation, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="p-6 md:p-8 lg:p-10 bg-white dark:bg-gray-800 rounded-xl shadow-2xl transition-all duration-300 w-full max-w-md mx-auto transform perspective-1000px">
    <h2 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-6 md:mb-8 text-gray-900 dark:text-white leading-tight drop-shadow-md">
      Share This Deliciousness!
    </h2>
    <p class="text-center text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8 md:mb-10">
      Love our food? Spread the word and share with your friends!
    </p>

    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 md:gap-6 lg:gap-8">

      <!-- Facebook Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 active:from-blue-800 active:to-blue-950 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-blue-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-blue-500 rounded-full mb-3 shadow-md group-hover:bg-blue-400 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Facebook</span>
      </a>

      <!-- Twitter Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-sky-500 to-sky-700 hover:from-sky-600 hover:to-sky-800 active:from-sky-700 active:to-sky-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-sky-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-sky-400 rounded-full mb-3 shadow-md group-hover:bg-sky-300 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21F6.681 12.23H17.84L9.363 2.25H2H8.82L0 12.23c2.173 2.923 5.066 5.029 8.324 5.029 6.786 0 11.964-6.462 11.964-11.493 0-.097-.007-.194-.015-.29M12.91 19.19H10.158L10.575 22h2.435Zm-4.965-7.468L2.25 2H4.912L12 11.168 19.088 2H22L15.932 10.963 22 22H19.088L11.83 12.832 4.912 22H2Z" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Twitter</span>
      </a>

      <!-- Instagram Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 active:from-purple-800 active:to-pink-800 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-purple-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600 rounded-full mb-3 shadow-md group-hover:from-yellow-300 group-hover:via-red-400 group-hover:to-purple-500 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 5.093c2.613 0 2.917.01 3.93.057 1.01.045 1.543.21 2.052.41 1.055.419 1.79.97 2.454 1.634.665.664 1.216 1.398 1.636 2.454.2.51.365 1.042.41 2.052.047 1.013.057 1.317.057 3.93s-.01 2.917-.057 3.93c-.045 1.01-.21 1.543-.41 2.052-.419 1.055-.97 1.79-1.634 2.454-.664.665-1.398 1.216-2.454 1.636-.51.2-.97.365-2.052.41-1.013.047-1.317.057-3.93.057s-2.917-.01-3.93-.057c-1.01-.045-1.543-.21-2.052-.41-1.055-.419-1.79-.97-2.454-1.634-.665-.664-1.216-1.398-1.636-2.454-.2-.51-.365-1.042-.41-2.052-.047-1.013-.057-1.317-.057-3.93s.01-2.917.057-3.93c.045-1.01.21-1.543.41-2.052.419-1.055.97-1.79 1.634-2.454.664-.665 1.398-1.216 2.454-1.636.51-.2.97-.365 2.052-.41 1.013-.047 1.317-.057 3.93-.057ZM12 3.55c-2.673 0-3.003.01-4.06.059-1.057.047-1.724.226-2.316.452-.693.266-1.265.632-1.83.997-.566.365-.96.793-1.34 1.232-.38.439-.706.892-1.026 1.32-.32.428-.588.79-.76 1.01-.17.22-.26.39-.28.47-.02.08-.03.11-.03.19-.01.07-.01.08-.02.13-.02.04-.02.04-.02.04-.01.01-.01.02-.02.03-.01.01-.01.02-.01.03-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.01-.01.01-.01.04-.01.02-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.02-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01.01-.01.01-.01.02-.01s-.01-.01-.01-.01c-.01-.02-.01-.02-.01-.02-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.04s0-.04-.01-.01c-.01-.02-.01-.02-.01-.02-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.02-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01v-.01c-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01h-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c0-.01 0-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-.01c-.01-.01-.01-.01-.01-1.06-.047-1.057-.226-1.724-.452-2.316-.266-.693-.632-1.265-.997-1.83-.365-.566-.793-.96-1.232-1.34-.439-.38-.892-.706-1.32-1.026-.428-.32-.79-.588-1.01-.76-.22-.17-.39-.26-.47-.28-.08-.02-.11-.03-.19-.03-.07-.01-.08-.01-.13-.02ZM12 18.026a6.026 6.026 0 1 0 0-12.052 6.026 6.026 0 0 0 0 12.052ZM12 7.625a4.375 4.375 0 1 0 0 8.75 4.375 4.375 0 0 0 0-8.75Zm5.4-.5a1.25 1.25 0 1 0-.003-2.5 1.25 1.25 0 0 0 .003 2.5Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Instagram</span>
      </a>

      <!-- WhatsApp Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-green-500 to-green-700 hover:from-green-600 hover:to-green-800 active:from-green-700 active:to-green-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-green-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-green-400 rounded-full mb-3 shadow-md group-hover:bg-green-300 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.001 2.001c-5.522 0-10 4.478-10 10 0 1.942.547 3.754 1.488 5.31L2 22l4.693-1.256c1.47 1.05 3.23 1.637 5.308 1.637C17.523 22 22 17.522 22 12.001c0-5.522-4.477-10-9.999-10.001Zm4.79 14.88c-.14-.23-1.04-.6-1.5-.83-1.03-.54-1.25-.62-1.77-.32-.52.3-1.02.94-1.24 1.05-.22.11-.44.12-.82.02-.38-.1-1.603-.59-3.047-1.84c-1.127-.96-1.895-2.12-2.115-2.5-.22-.38-.02-.59.1-.69.11-.1.24-.17.37-.28.13-.1.17-.18.23-.3.06-.11.03-.23-.01-.32-.04-.09-.37-.76-.51-.9-.15-.14-.12-.3-.08-.38.04-.08.13-.2.2-.28.08-.08.17-.18.24-.26.07-.08.13-.15.2-.23.07-.08.14-.15.2-.22.06-.07.13-.14.19-.2.06-.06.12-.13.19-.19.07-.06.13-.12.2-.18.07-.06.13-.12.2-.17.06-.05.12-.1.18-.16.06-.06.12-.11.18-.16.06-.05.12-.1.18-.15.06-.04.12-.09.18-.13.06-.04.12-.08.18-.12.06-.04.12-.07.18-.11.06-.03.12-.06.18-.08.06-.02.12-.04.18-.06.06-.02.12-.03.18-.04.06-.01.12-.02.18-.03.06-.01.12-.01.18-.01.06 0 .12 0 .18.01.06.01.12.01.18.02.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.02.18.03.06.01.12.01.18.02.06.01.12.01.18.01.06.01.12 0 .18 0 .06 0 .12-.01.18-.01.06-.01.12-.01.18-.02.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.06-.01.12-.02.18-.03.04-.01.08-.01.12-.02.04-.01.08-.01.12-.01.04 0 .08-.01.12-.01.04-.01.08-.01.12-.01.04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08 0 .12 0 .04 0 .08-.01.12-.01.04-.01.08-.01.12-.01.04-.01.08-.01.12-.01.04 0 .08-.01.12-.01l-.01.01h.01c-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01-.01-.01.01-.01.01-.01.01-.01.01-.01.01-.01c-.01 0-.01 0-.01.01-.01 0-.01 0-.01.01-.01 0-.01 0-.01.01-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01c-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01 0-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01-.01C15.22 17.06 15.7 16.96 16.79 16.48c.17-.07.36-.14.53-.2.17-.06.35-.12.52-.18.16-.06.33-.11.5-.16.16-.05.33-.09.49-.13.16-.04.33-.07.49-.09.16-.03.33-.05.49-.06.16-.01.33-.02.49-.01.16 0 .33.01.49.02.16.01.32.02.48.04.16.02.32.03.48.05.16.03.32.04.48.07.16.02.32.05.48.07.16.03.32.05.48.08.16.03.32.06.48.08.16.02.32.05.48.07.16.02.32.05.48.07.15.02.31.05.47.07.16.02.31.05.47.07.16.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.47.07.16.02.31.04.47.07.15.02.31.04.46.06.16.02.31.04.47.06.15.02.31.03.46.06.15.02.31.03.46.05.15.02.31.03.46.05.16.02.31.03.46.05.15.02.3.03.46.05.15.02.3.03.45.05.15.02.3.03.45.05.15.02.3.03.45.04.15.01.3.02.45.04.15.01.3.02.45.03.15.01.3.02.45.03C17.5 16.7 17.26 16.92 16.79 16.88Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">WhatsApp</span>
      </a>

      <!-- Pinterest Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-red-600 to-red-800 hover:from-red-700 hover:to-red-900 active:from-red-800 active:to-red-950 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-red-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-red-500 rounded-full mb-3 shadow-md group-hover:bg-red-400 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.297 2.15c-.138.005-.26.06-.41.11L.004 9.176l5.733 5.733A.997.997 0 0 0 6 15c0 3.866 3.134 7 7 7 3.865 0 7-3.134 7-7 0-3.865-3.135-7-7-7-1.408 0-2.732.42-3.867 1.157L5.807 8.16a.996.996 0 0 0-.256-1.57C5.08 6.51 4.7 6.453 4.14 6.74l1.32-.871A.996.996 0 0 0 6 5c.42 0 .814.162 1.111.458.297.297.458.69.458 1.11V11c0 .083-.004.166-.013.248-.009.082-.02.164-.035.247-.014.083-.03.165-.049.248-.01.048-.017.094-.027.142-.01.047-.019.094-.029.14-.009.047-.017.094-.025.14-.008.047-.015.093-.023.14-.008.047-.014.093-.019.14-.005.046-.008.09-.011.135-.003.045-.005.09-.005.135 0 .274.113.524.293.707.18.18.43.293.707.293.275 0 .525-.113.708-.293.18-.182.292-.432.292-.707 0-.008 0-.016-.002-.024-.002-.008-.003-.016-.005-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.003-.016-.005-.024-.002-.008-.003-.016-.005-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.003-.008-.005-.016-.007-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.003-.008-.005-.016-.007-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024-.002-.008-.004-.016-.006-.024L11 15c0 1.933-1.611 3.5-3.5 3.5-.828 0-1.58-.29-2.164-.766.195 1.096 1.15 1.942 2.364 1.942C12.38 19.675 16.5 15.556 16.5 10.435c0-4.048-2.617-7.46-6.19-8.497.042-.004.09-.008.138-.008Z" clip-rule="evenodd" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Pinterest</span>
      </a>

      <!-- Email Button -->
      <a href="#" class="share-button group bg-gradient-to-br from-gray-500 to-gray-700 hover:from-gray-600 hover:to-gray-800 active:from-gray-700 active:to-gray-900 transition-all duration-300 ease-in-out transform hover:-translate-y-2 active:translate-y-0.5 hover:shadow-lg dark:hover:shadow-gray-500/50 rounded-xl p-4 flex flex-col items-center justify-center relative overflow-hidden focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-700/50 perspective-800px">
        <div class="absolute inset-0 bg-white opacity-10 dark:opacity-0 animate-pulse-light group-hover:opacity-0 transition-opacity duration-500"></div>
        <div class="icon-wrapper relative z-10 p-3 bg-gray-400 rounded-full mb-3 shadow-md group-hover:bg-gray-300 transform group-hover:scale-110 transition-transform duration-300">
          <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M1.5 8.67v8.586a1.5 1.5 0 0 0 .546 1.176l7.854 5.236a2 2 0 0 0 2.378 0l7.854-5.236A1.5 1.5 0 0 0 22.5 17.256V8.67a1.5 1.5 0 0 0-.8-1.39l-8.44-4.22a2 2 0 0 0-1.878 0l-8.44 4.22A1.5 1.5 0 0 0 1.5 8.67ZM12 6.55L20.45 10.98a.75.75 0 0 1 .45 1.17l-.7 1.05-.71 1.066-6.59-4.394a2 2 0 0 0-2.378 0L3.25 14.18V8.67ZM18.51 18.06l-6.59-4.394a2 2 0 0 0-2.378 0l-6.59 4.394a1.5 1.5 0 0 0 .546 1.176l7.854 5.236a2 2 0 0 0 2.378 0l7.854-5.236a1.5 1.5 0 0 0 .546-1.176V8.67ZM12 12.001l7.854 5.236a1.5 1.5 0 0 0 .546 1.176L12 23.364l-8.4-5.604a1.5 1.5 0 0 0 .546-1.176Z" />
          </svg>
        </div>
        <span class="text-white text-xl md:text-2xl font-bold drop-shadow-sm group-hover:text-gray-100 transition-colors duration-300">Email</span>
      </a>

    </div>

    <p class="text-center text-sm md:text-md text-gray-400 dark:text-gray-500 mt-8 md:mt-12">
      &copy; 2023 Delicious Bites. All rights reserved.
    </p>
  </div>
</div>

<style>
  /* Adding a subtle 3D effect for buttons */
  .share-button {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transform-style: preserve-3d;
    perspective: 800px;
    will-change: transform, box-shadow;
  }

  .share-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translateZ(-50px) translateY(-50%) translateX(-50%) rotateX(-15deg);
    filter: blur(25px);
    opacity: 0;
    transition: all 0.3s ease-out;
    pointer-events: none;
  }

  .share-button:hover::before {
    opacity: 1;
    transform: translateZ(-30px) translateY(-50%) translateX(-50%) rotateX(-10deg);
  }

  .share-button:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0.5px 1.5px rgba(0, 0, 0, 0.06);
  }

  .share-button .icon-wrapper {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease-out;
  }

  .share-button:hover .icon-wrapper {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  }

  /* Dark mode specific 3D adjustments for better contrast/visibility */
  @media (prefers-color-scheme: dark) {
    .dark .share-button {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .dark .share-button:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button::before {
      background: rgba(255, 255, 255, 0.05);
    }

    .dark .share-button:hover::before {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  /* Keyframe for light pulse effect */
  @keyframes pulse-light {
    0% {
      opacity: 0.1;
    }
    50% {
      opacity: 0.4;
    }
    100% {
      opacity: 0.1;
    }
  }
  .animate-pulse-light {
    animation: pulse-light 2s infinite ease-in-out;
  }

</style>

Composant Boutons de partage social

Un composant élégant et réactif de boutons de partage social conçu pour les sites d’actualités et de journalisme, doté d’une luxueuse palette de couleurs forêt/vert et d’une prise en charge du mode sombre. Il comprend plusieurs éléments interactifs pour partager des articles sur diverses plateformes.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-950 font-sans antialiased text-gray-800 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-xl bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-green-200 dark:border-green-800">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-green-100 dark:border-green-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-green-800 dark:text-green-200 mb-2 leading-tight tracking-tight">
        Like What You Read?
      </h2>
      <p class="text-md sm:text-lg text-green-700 dark:text-green-300 font-medium">
        Share this insightful article with your network!
      </p>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 grid grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
      <!-- Share Button: Facebook -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.886 8.438-9.879Z" clip-rule="evenodd" />
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Facebook</span>
      </button>

      <!-- Share Button: Twitter/X -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-gray-900 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 dark:bg-gray-100 dark:hover:bg-gray-200 dark:focus:ring-gray-600 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white dark:text-gray-900 mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.901 1.153 13.916 8.92c-.171.267-.442.428-.737.478L4.697 10.63H4.69c-.495.006-.991-.046-1.479-.153.208-.01.416.035.617.13 1.144.49 1.947 1.636 1.947 2.923v.15c0 .354-.084.706-.245 1.026-.067.135-.118.257-.156.368.175.056.35.09.525.093 1.06 0 1.916-.856 1.916-1.917 0-.306-.073-.604-.213-.865L12 10.457l3.651 4.545a1.914 1.914 0 0 1-.225 3.013c.277.262.614.475.975.642 1.341.61 2.996.903 4.673.811.107.822.429 1.57.854 2.235.438.694.945 1.31 1.503 1.849 0 0 .001.001.002.001L22 22 2 2v20c0 0 20-20 20-20z" fill-rule="evenodd" clip-rule="evenodd"/>
        </svg>
        <span class="text-white dark:text-gray-900 font-semibold text-sm sm:text-base">Twitter</span>
      </button>

      <!-- Share Button: LinkedIn -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-400 dark:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2zM8 19H5v-9h3v9zM6.5 8.25A1.75 1.75 0 1 1 8.25 6.5 1.75 1.75 0 0 1 6.5 8.25zM19 19h-3v-4.74c0-1.78-1.52-2.46-2.58-1.42s-1.42 1.38-1.42 1.38V19h-3v-9h3v1.76c.45-.63 1.15-1.12 2.39-1.12 2.65 0 4.11 1.76 4.11 4.74V19z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">LinkedIn</span>
      </button>

      <!-- Share Button: Email -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-red-600 hover:bg-red-700 focus:ring-4 focus:ring-red-300 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.25 6.75A2.25 2.25 0 0 1 4.5 4.5h15C20.74 4.5 22 5.76 22 7.25v9.5c0 1.49-1.26 2.75-2.5 2.75H4.5A2.25 2.25 0 0 1 2.25 17.5v-9.5zm2.25 0V7a.75.75 0 0 0-.75-.75H4.5v0zm2.25 0l4.75 3.57a1.5 1.5 0 0 0 1.76 0L17.25 6.75h-10.5zM2.25 8.75v8.75A1.25 1.25 0 0 0 3.5 18.75h17A1.25 1.25 0 0 0 21.25 17.5v-8.75L12 15z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Email</span>
      </button>

      <!-- Share Button: WhatsApp -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-green-500 hover:bg-green-600 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-900 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 2C7.38 2 3.61 5.77 3.61 10.43c0 1.55.4 3.06 1.16 4.4l-1.2 4.35 4.49-1.18c1.3.71 2.76 1.09 4.28 1.09C16.7 20.44 20.47 16.67 20.47 12.01S16.7 3.62 12.04 3.62zM17 14.8c-.14.24-.2.27-.47.37-.29.11-.67.16-1.07.16-.48 0-.91-.12-1.37-.29-.39-.15-1.17-.37-2.03-.76-.87-.39-1.74-.95-2.48-1.58-.77-.66-1.42-1.44-1.92-2.31-.5-.87-.78-1.72-.78-2.52 0-.9.27-1.45.39-1.66.12-.2.27-.27.42-.31.15-.04.38-.04.56-.02.18 0 .38.01.55.04.17.03.3-.06.45.3.15.35.53 1.28.53 1.28.02.04.03.07.03.11-.02.1-.06.2-.12.3-.39.46-.77.92-1.11 1.34-.36.43-.58.62-.64.69-.06.07-.13.14-.07.24.06.12.2.29.35.43.16.15.3.26.44.39.81.71 1.48 1.28 2.05 1.63.57.36 1.05.57 1.55.77 0 .01.01.01.01.01.04.02.07.03.11.05.12.03.22.05.33.05.07 0 .15-.01.2-.02.43-.17 1.27-.48 1.5-.66v-.01c.23-.19.33-.29.47-.36.14-.07.26-.06.39-.03.1.02.25.09.43.26.17.18.28.3.38.4.1.1.2.22.3.33.1.1.16.2.23.27.06.07.06.14.07.26v.01z"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">WhatsApp</span>
      </button>

      <!-- Share Button: Copy Link -->
      <button class="flex items-center justify-center p-3 sm:p-4 rounded-lg bg-green-700 hover:bg-green-800 disabled:bg-green-400 focus:ring-4 focus:ring-green-400 dark:bg-green-800 dark:hover:bg-green-900 dark:focus:ring-green-950 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg group" onclick="navigator.clipboard.writeText('https://www.example.com/article-link').then(function(){ alert('Link copied to clipboard!'); }, function(){ alert('Failed to copy link!'); });">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white mr-2.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13.5h6m-3-3v6m-9 5.25a2.25 2.25 0 01-2.25-2.25V9C2.25 7.7 3.39 6.75 4.87 6.75h.92L6 4.78a2.25 2.25 0 011.85-.78h8.3a2.25 2.25 0 011.85.78l.21 1.97h.92c1.48 0 2.62 1.05 2.62 2.3V17.5a2.25 2.25 0 01-2.25 2.25h-15zM4 17.5L5.75 9H18.25L20 17.5"/>
        </svg>
        <span class="text-white font-semibold text-sm sm:text-base">Copy Link</span>
      </button>
    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t border-green-100 dark:border-green-700 text-center">
      <p class="text-sm sm:text-base text-gray-500 dark:text-gray-400">
        Thank you for reading and supporting quality journalism.
      </p>
    </div>
  </div>
</div>

<!-- Add a script tag to toggle dark mode for demonstration purposes -->
<script>
  // This script is purely for demonstration and should ideally be part of a larger JS setup.
  // It toggles dark mode when the 'D' key is pressed.
  document.addEventListener('keydown', (e) => {
    if (e.key === 'd' || e.key === 'D') {
      document.documentElement.classList.toggle('dark');
    }
  });
</script>

Boutons de partage social Neumorphic - Thème Emploi/Carrière

Un ensemble de boutons de partage social conçus avec un style neumorphique doux et des couleurs bonbon gaies, adaptés aux sites d’emploi ou aux plateformes de carrière. Dispose d’un design réactif et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-6 sm:p-8 md:p-10 bg-[#e0e5ec] dark:bg-[#2c2f33] min-h-screen flex items-center justify-center font-sans">
  <div class="p-6 rounded-3xl shadow-xl dark:shadow-md transition-all duration-300 transform bg-[#e0e5ec] dark:bg-[#34373b] max-w-lg w-full
              shadow-[inset_7px_7px_15px_#bebebe,inset_-7px_-7px_15px_#ffffff]
              dark:shadow-[inset_7px_7px_15px_#272a2e,inset_-7px_-7px_15px_#41454c]">

    <h2 class="text-center text-2xl sm:text-3xl font-bold mb-6 text-[#6a6a6a] dark:text-[#a0a0a0]">Share This Opportunity!</h2>

    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">

      <!-- LinkedIn Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#0A66C2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">LinkedIn</span>
      </button>

      <!-- Twitter Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#1DA1F2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.447 0-6.227 2.78-6.227 6.228 0 .486.052.958.156 1.41-.519-.026-1.02-.13-1.498-.291-5.185-2.618-8.714-8.243-9.041-9.982-.574-.291-1.127-.477-1.645-.555-.175.71.076 1.343.344 1.83 1.13 1.942 3.197 4.195 6.25 5.86-1.785.426-3.599.664-5.467.664-.813 0-1.605-.074-2.373-.218-1.928-1.18-.737-3.08-1.641-3.415-.828-1.096-1.157-2.327-.923-3.031.956.408 2.016.634 3.13.634.502 0 .991-.064 1.463-.195 1.77-.478 3.013-1.643 3.42-3.045.399-1.396.115-2.906-.838-3.955-1.077-1.2-2.79-1.93-4.66-1.93-2.043 0-3.513 1.05-4.2 2.37-.504.996-.757 2.083-.757 3.245 0 1.2.228 2.348.683 3.393.425 1.002.99 1.89 1.672 2.628 3.535 3.738 8.016 6.012 12.607 6.012 3.824 0 7.37-1.385 9.948-3.57 1.042-2.146 1.62-4.526 1.62-7.05v-.268c.843-.687 1.564-1.547 2.142-2.502z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Twitter</span> 
      </button>

      <!-- Facebook Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#1877F2] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.248-1.333 1.172-1.333h2.828v-5h-3.964c-3.344 0-4.036 2.338-4.036 4.622v1.378z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Facebook</span>
      </button>

      <!-- Email Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#EA4335] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M0 3v18h24v-18h-24zm6.623 7.929l-6.623 5.671v-11.52zm11.377 5.671l-6.623-5.671 6.623-5.671v11.342zm-12.87-9.521l-3.38 2.901 3.38 3.598v-6.499zm16.75 6.499v-3.598l3.38-2.901-3.38-3.598z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">Email</span>
      </button>

      <!-- WhatsApp Button -->
      <button class="neumorphic-button group">
        <div class="bg-[#25D366] p-3 rounded-full shadow-lg transition-all duration-300 group-hover:scale-110">
          <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M.057 24l1.687-6.163c-1.041-1.804-1.39-3.901-.767-6.183 1.055-3.824 4.398-6.529 8.3-6.529 3.901 0 7.244 2.705 8.3 6.529.624 2.282.275 4.379-1.041 6.183l1.687 6.163-6.334-1.993c-1.854 1.066-3.975 1.636-6.196 1.636-4.996 0-9.064-4.064-9.064-9.064s4.068-9.064 9.064-9.064c4.996 0 9.064 4.064 9.064 9.064h-3c0-3.323-2.677-6-6-6-3.323 0-6 2.677-6 6s2.677 6 6 6c1.118 0 2.164-.309 3.068-.846l-1.068-.337 1.687 6.163zm-4.322-14.773c-1.393-.574-2.955-.87-4.593-.87-3.901 0-7.244 2.705-8.3 6.529-.624 2.282-.275 4.379 1.041 6.183l1.687 6.163 6.334-1.993c1.854 1.066 3.975 1.636 6.196 1.636 4.996 0 9.064-4.064 9.064-9.064s-4.068-9.064-9.064-9.064c-3.901 0-7.244 2.705-8.3 6.529z" />
          </svg>
        </div>
        <span class="mt-2 text-sm font-medium text-[#6a6a6a] dark:text-[#a0a0a0]">WhatsApp</span>
      </button>

    </div>

    <p class="text-center text-sm font-light mt-6 text-[#9ca3af] dark:text-[#6b7280]">Help a friend find their next big career move!</p>

  </div>

  <style>
    .neumorphic-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      border-radius: 1.5rem; /* 24px */
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      background-color: #e0e5ec;
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
      text-decoration: none;
    }

    .neumorphic-button:hover {
      background-color: #e8edff;
      transform: translateY(-2px);
      box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
    }

    .neumorphic-button:active {
      box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
      transform: translateY(1px);
    }

    /* Dark Mode Styles */
    html.dark .neumorphic-button {
      background-color: #34373b;
      box-shadow: 7px 7px 15px #272a2e, -7px -7px 15px #41454c;
    }

    html.dark .neumorphic-button:hover {
      background-color: #3b3e42;
      box-shadow: 5px 5px 10px #272a2e, -5px -5px 10px #41454c;
    }

    html.dark .neumorphic-button:active {
      box-shadow: inset 5px 5px 10px #272a2e, inset -5px -5px 10px #41454c;
    }
  </style>
</div>

Composant Boutons de partage social

Un composant simple et réactif de boutons de partage social avec une esthétique inspirée du design de Memphis utilisant des couleurs neutres et froides, adapté aux outils CRM/professionnels. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-900 font-sans min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full p-4 sm:p-6 md:p-8 rounded-lg shadow-lg relative overflow-hidden
              bg-gradient-to-br from-gray-100 to-white dark:from-gray-800 dark:to-gray-950
              border border-gray-200 dark:border-gray-700">

    <!-- Memphis Design Elements (Geometric shapes) -->
    <div class="absolute -top-8 -left-8 w-24 h-24 bg-blue-200 dark:bg-blue-800 transform rotate-45 rounded-lg opacity-70"></div>
    <div class="absolute -bottom-6 -right-6 w-20 h-20 bg-gray-300 dark:bg-gray-700 transform skew-x-12 opacity-60"></div>
    <div class="absolute top-1/4 left-1/4 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full opacity-50"></div>

    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white mb-6 relative z-10 text-center">
      Share This Content
    </h3>

    <div class="flex flex-wrap gap-3 sm:gap-4 justify-center relative z-10">

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75"
         aria-label="Share on Facebook">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-blue-400 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-75"
         aria-label="Share on Twitter">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-1.04-.614-2.185-1.002-3.425-1.229a4.958 4.958 0 00-8.467 4.549 14.025 14.025 0 01-10.139-5.127 4.958 4.958 0 001.523 6.696c-.965-.034-1.871-.295-2.673-.737v.063a4.958 4.958 0 003.945 4.862 4.995 4.995 0 01-2.22-.088 4.93 4.93 0 004.604 3.447 9.956 9.956 0 01-6.102 2.105c-.39-.023-.777-.048-1.164-.079A13.95 13.95 0 0014 20.443c6.367 0 9.33-5.227 9.33-9.743 0-.15-.003-.298-.009-.446A16.974 16.974 0 0024 4.57z">
          </path>
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75"
         aria-label="Share on Pinterest">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 2C6.478 2 2 6.478 2 12s4.478 10 10 10c5.236 0 9.53-4.043 9.933-9.183.042-.5-.192-.937-.64-.997s-.887.182-1.383.568c-1.082.827-2.347 1.488-3.79 1.488-2.617 0-4.733-2.115-4.733-4.73C7.437 6.478 9.92 4 12 4c2.204 0 3.993 1.637 4.542 3.82.046.192.203.255.45.187.247-.068.397-.245.474-.473.55-1.633.374-3.568-1.002-4.998C15.42 2.628 13.785 2 12 2ZM8.736 10.963c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.895 4.07c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm5.626-2.222c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-1.787 4.148c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Zm-2.738-2.58c.27-.378.68-.456 1.05-.187.37.27.447.68.177 1.057-.27.378-.68.455-1.05.187-.37-.27-.447-.68-.177-1.057Z" clip-rule="evenodd" />
        </svg>
      </a>

      <a href="#" class="flex items-center justify-center p-3 sm:p-4 rounded-full bg-gray-700 hover:bg-gray-800 dark:bg-gray-500 dark:hover:bg-gray-600 transition-all duration-300
                          shadow-md hover:shadow-lg transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75"
         aria-label="Share via Email">
        <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M1.5 8.67a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 8.67v7.66A2.25 2.25 0 0120.25 18.5H3.75A2.25 2.25 0 011.5 16.33v-7.66zM1.5 9.75v-.88A2.25 2.25 0 013.75 6H20.25A2.25 2.25 0 0122.5 8.87v.88H1.5z" />
          <path d="M22.5 9.75c0-.44-.36-.75-.75-.75H2.25c-.39 0-.75.31-.75.75v.75l10.5 5.5s10.5-5.5 10.5-5.5V9.75z" />
        </svg>
      </a>

    </div>

  </div>
</div>

Composant Boutons de partage social

Un composant de bouton de partage social ludique et amusant conçu pour les sites Web de jeux, avec une palette de couleurs arc-en-ciel dégradée, des éléments arrondis et des effets de survol interactifs. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 min-h-screen flex items-center justify-center font-sans">

  <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 sm:p-8 md:p-10 max-w-full mx-auto transform transition-all duration-300 hover:scale-[1.01] border-4 border-white dark:border-gray-700 overflow-hidden relative group">
    
    <!-- Background Sparkle Effect -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-50 transition-opacity duration-500">
      <div class="absolute w-12 h-12 bg-purple-400 rounded-full blur-xl top-4 left-4 animate-pulse-slow"></div>
      <div class="absolute w-16 h-16 bg-pink-400 rounded-full blur-xl bottom-8 right-8 animate-pulse-slow animation-delay-2000"></div>
      <div class="absolute w-10 h-10 bg-yellow-400 rounded-full blur-xl top-1/2 left-1/4 animate-pulse-slow animation-delay-4000"></div>
    </div>
    
    <div class="relative z-10 text-center">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-4 sm:mb-6 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-pink-500 to-yellow-500 dark:from-purple-400 dark:via-pink-400 dark:to-yellow-400 drop-shadow-md">
        Share the Epic Win!
      </h2>
      <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto">
        Spread the word about your legendary gaming moments and invite friends to join the fun.
      </p>

      <div class="flex flex-wrap justify-center gap-4 sm:gap-6">

        <!-- Twitter Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-blue-400 to-blue-600 hover:from-blue-500 hover:to-blue-700
          dark:from-blue-600 dark:to-blue-800 dark:hover:from-blue-500 dark:hover:to-blue-700
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600
          relative overflow-hidden z-10"
          aria-label="Share on Twitter">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.25c8.53 0 13.2-7.07 13.2-13.2v-.6c.91-.66 1.7-.68 2.33-1.07-.85.38-1.74.65-2.67.76.98-.59 1.74-1.5 2.1-2.61-.92.55-1.94.95-3.02 1.17C18.66 2.74 17.5 2 16.22 2c-2.4 0-4.35 1.95-4.35 4.35 0 .34.04.67.11.99C7.45 6.64 3.9 4.7 1.5 1.5c-.37.63-.58 1.34-.58 2.13 0 1.5 1.1 2.76 2.5 3.32-.96-.03-1.87-.29-2.66-.7v.05c0 2.11 1.5 3.87 3.5 4.28-.36.1-.73.15-1.12.15-.27 0-.54-.03-.8-.08.56 1.75 2.17 3.03 4.09 3.06-1.57 1.23-3.56 1.95-5.72 1.95-.37 0-.74-.02-1.1-.06C2.9 19.3 5.06 20.25 8.29 20.25z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Facebook Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-indigo-500 to-indigo-700 hover:from-indigo-600 hover:to-indigo-800
          dark:from-indigo-700 dark:to-indigo-900 dark:hover:from-indigo-600 dark:hover:to-indigo-800
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-600
          relative overflow-hidden z-10"
          aria-label="Share on Facebook">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Discord Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800
          dark:from-purple-700 dark:to-purple-900 dark:hover:from-purple-600 dark:hover:to-purple-800
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-600
          relative overflow-hidden z-10"
          aria-label="Share on Discord">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.25 6.475C19.782 5.093 18.91 3.882 17.75 2.946c-.053-.042-.11-.08-.168-.11ZM3.743 6.475C4.21 5.093 5.083 3.882 6.242 2.946c.057-.042.115-.08.172-.11ZM12 0c-1.895 0-3.77.363-5.594 1.107C4.697 2.193 3.036 3.633 1.83 5.28c-1.205 1.647-1.92 3.513-2.072 5.42C-.32 12.63.15 14.542.929 16.326c.78 1.784 1.936 3.376 3.393 4.673 1.458 1.3 3.167 2.25 5.05 2.894 1.884.644 3.844.821 5.792.518 1.947-.303 3.805-.98 5.437-2 1.632-1.02 2.993-2.404 3.99-4.01C23.85 14.28 24.32 12.37 24 10.42c-.152-1.907-.866-3.773-2.072-5.42C20.728 3.633 19.068 2.193 17.402 1.107 15.576.363 13.7.001 11.805 0zm-2.003 14.735c-.947 0-1.74-.752-1.74-1.68 0-.928.793-1.68 1.74-1.68.95 0 1.74.752 1.74 1.68 0 .927-.79 1.68-1.74 1.68zm7.006 0c-.947 0-1.74-.752-1.74-1.68 0-.928.794-1.68 1.74-1.68.948 0 1.737.752 1.737 1.68 0 .927-.789 1.68-1.737 1.68zm-.136-5.093c-.93-.414-2.8-.756-4.87-.756-2.07 0-3.94 1.89-4.87.756-.36-.16-.388-.307-.15-.46 2.45-1.57 4.09-.94 4.09-.94l.112.062s2.61.69 4.31-.065c.238-.153.21-.005-.15.46z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

        <!-- Reddit Button -->
        <a href="#" class="group flex items-center justify-center p-3 sm:p-4 rounded-full shadow-lg transition-all duration-300 transform
          bg-gradient-to-r from-orange-400 to-orange-600 hover:from-orange-500 hover:to-orange-700
          dark:from-orange-600 dark:to-orange-800 dark:hover:from-orange-500 dark:hover:to-orange-700
          hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600
          relative overflow-hidden z-10"
          aria-label="Share on Reddit">
          <svg class="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 0C6.47 0 2 4.58 2 10.22c0 2.21.73 4.25 1.96 5.86.08.11.12.26.12.42v5.02c0 .48.37.87.84.87h1.02c.08 0 .15-.02.21-.05.5-.23 1.05-.59 1.64-.92.29-.16.6-.28.93-.34 1.1-.2 2.29-.3 3.52-.3 1.23 0 2.42.1 3.52.3.32.06.64.18.93.34.59.33 1.14.69 1.64.92.07.03.14.05.21.05h1.02c.47 0 .84-.39.84-.87v-5.02c0-.16.04-.31.12-.42C21.27 14.47 22 12.43 22 10.22 22 4.58 17.53 0 12 0zm5.22 15.65c-.24.13-1.07.39-2.02.39-1.01 0-1.9-.3-2.8-.81-.22-.1-.4-.08-.57.06-.11.08-.2.18-.28.3-.08.1-.15.2-.2.3-.02.04-.04.09-.06.14-.07.13-.09.28-.06.41.03.1.09.18.17.25.13.11.3.17.47.17h.1c.14 0 .27-.05.37-.14l.02-.02c.11-.1.2-.21.28-.34.19-.3.12-.66-.19-.77-.38-.13-.77-.18-1.25-.18-.34 0-.68.04-1.0.12-.13.03-.27.06-.4.06-.03 0-.06-.01-.09-.02-.15-.04-.2-.2-.14-.3.04-.08.1-.16.18-.22.09-.07.19-.13.3-.18.1-.05.21-.08.32-.1.14-.02.2-.1.15-.22-.02-.04-.04-.08-.07-.12-.05-.09-.12-.16-.19-.22-.09-.08-.2-.13-.3-.16-.08-.02-.16-.03-.24-.03-.11 0-.2.03-.27.08s-.13.11-.15.19c-.06.16-.06.33 0 .49.03.09.08.17.15.23.08.07.17.12.27.16.12.04.25.07.38.07.13 0 .25-.03.37-.08.12-.06.22-.14.3-.23.1-.11.16-.2.16-.3l.01-.02c0-.03 0-.05-.02-.08-.02-.02-.04-.04-.07-.05-.05-.02-.12-.02-.19 0-.08.02-.16.06-.23.11-.08.05-.15.11-.22.17-.06.07-.12.15-.17.24-.03.05-.05.1-.06.15-.02.05-.03.1-.03.16 0 .09.03.17.08.23.05.06.11.1.18.12.07.02.14.03.22.03.1 0 .2-.02.29-.05.09-.03.17-.07.24-.12.08-.05.14-.1.19-.17.06-.06.1-.13.13-.2.03-.07.04-.14.04-.21 0-.1-.03-.19-.07-.27-.05-.08-.11-.15-.19-.21-.09-.07-.19-.12-.3-.16-.11-.04-.23-.06-.35-.06-.2 0-.39.04-.57.1-.18.06-.34.14-.49.25-.15.1-.28.22-.39.36-.11.14-.19.29-.25.46-.06.16-.08.34-.05.51.03.17.11.33.22.46.11.14.25.26.4.35.15.09.31.16.48.2.17.04.35.06.5.06.21 0 .41-.03.6-.08.19-.05.37-.12.54-.2.17-.09.32-.19.46-.3.14-.1.26-.23.36-.36.03-.04.05-.08.07-.12.03-.05.04-.1.04-.16 0-.08-.02-.15-.06-.22-.04-.07-.09-.13-.15-.17-.06-.05-.13-.08-.2-.1-.07-.02-.15-.02-.23 0-.08.02-.15.05-.21.09-.06.04-.11.08-.16.13-.04.05-.07.09-.08.14-.02.04-.03.09-.03.14 0 .07.02.13.06.18.04.05.09.08.15.1.06.02.12.02.19 0zm1.78-4.22c-.67 0-1.25-.58-1.25-1.29 0-.7.58-1.29 1.25-1.29.69 0 1.25.59 1.25 1.29 0 .71-.56 1.29-1.25 1.29zM8.32 10.14c-.67 0-1.25-.58-1.25-1.29 0-.7.58-1.29 1.25-1.29.69 0 1.25.59 1.25 1.29 0 .71-.56 1.29-1.25 1.29z" />
          </svg>
          <span class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none
            bg-gradient-to-t from-white/30 to-transparent"></span>
        </a>

      </div>

      <p class="text-sm text-gray-500 dark:text-gray-400 mt-8">
        Game on! &copy; 2023
      </p>

    </div>
  </div>
</div>

<style>
  /* Custom animations for the playful background sparks */
  @keyframes pulse-slow {
    0% { transform: scale(0.8) translateY(0px) rotate(0deg); opacity: 0.2; }
    25% { transform: scale(1.1) translateY(-5px) rotate(10deg); opacity: 0.4; }
    50% { transform: scale(1) translateY(0px) rotate(0deg); opacity: 0.2; }
    75% { transform: scale(0.9) translateY(5px) rotate(-10deg); opacity: 0.3; }
    100% { transform: scale(0.8) translateY(0px) rotate(0deg); opacity: 0.2; }
  }

  .animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }
</style>