Pulsanti di condivisione social

Componente Pulsanti di condivisione social

Un componente di pulsanti di condivisione social retrò/vintage con una combinazione di colori monocromatica. Si tratta di un design complesso e reattivo con supporto per temi scuri, adatto per un portfolio. Utilizza Tailwind CSS senza JavaScript.

Apri anteprima

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg max-w-sm w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">Share My Work</h2>
    <div class="grid grid-cols-2 gap-4">
      <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c.96.2 1.956.333 3.013.333 1.056 0 2.052-.133 3.013-.333L10.3 12.3l-2.01 7.951zM12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c.002-.001.004-.002.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Twitter</span>
      </a>
      <a href="#" class="bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm5 10c0 .99-.607 1.83-1.472 2.15l-.008.003c.594-.962.88-2.03.88-3.15 0-2.316-1.528-4.28-3.92-4.86.04-.15.06-.3.06-.47 0-.74-.23-1.43-.63-2.02l-.004-.007C15.176 4.968 16.945 8.163 17 12zm-3.5 0c0 1.93-1.57 3.5-3.5 3.5S8.5 13.93 8.5 12 10.07 8.5 12 8.5s3.5 1.57 3.5 3.5zm-5.748-1.58C9.53 9.71 10.74 9 12 9s2.47.71 3.248 1.42c-.77-.42-1.68-.67-2.67-.67-.99 0-1.9.25-2.67.67zM12 20.1C8.28 20.1 5 16.82 5 12c0-1.76.67-3.41 1.79-4.66l-.007-.008C5.176 8.163 3 11.233 3 12c0 2.21 1.79 4 4 4v-1h-.5a1.5 1.5 0 00-1.5 1.5v2c0 .83.67 1.5 1.5 1.5h11c.83 0 1.5-.67 1.5-1.5v-2a1.5 1.5 0 00-1.5-1.5H17v-1c2.21 0 4-1.79 4-4s-1.79-4-4-4v1h.5a1.5 1.5 0 001.5-1.5v-2c0-.83-.67-1.5-1.5-1.5h-11c-.83 0-1.5.67-1.5 1.5v2zm4.708 1.42A5.726 5.726 0 0017.9 12c0-1.02-.19-2.007-.545-2.923l-1.107.306c-.002.001-.004.002-.006.003L16.708 11.43z"/></svg>
        <span>Facebook</span>
      </a>
      <a href="#" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.5 13.5h-9V8.5h9v7zm-2-5H9.5v-2h5v2zm-2.5 5H9.5v-2h2.5v2zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>YouTube</span>
      </a>
      <a href="#" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>Instagram</span>
      </a>
      <a href="#" class="bg-gray-700 hover:bg-gray-800 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>GitHub</span>
      </a>
      <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white font-bold py-3 px-4 rounded flex items-center justify-center space-x-2 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm3.324 14.542l.534-.148c.036.19.062.383.062.584 0 .34-.047.668-.135.978l-1.002-.277c-.015-.004-.03-.008-.045-.012l-.99-.272zM12 4.1c-1.637 0-3.155.679-4.22 1.768L12 10.369c.148.148.337.222.526.222.189 0 .378-.074.526-.222L16.22 5.868C15.155 4.779 13.637 4.1 12 4.1zm-4.708 7.33A5.726 5.726 0 016.1 12c0 1.02.19 2.007.545 2.923l1.107-.306c-.002-.001-.004-.002-.006-.003L7.292 11.43zm9.416 0L15.24 16.714c.002.001.004.002.006.003L16.22 14.923C16.577 14.007 16.768 13.02 16.768 12c0-.38-.035-.747-.099-1.096l-.999.276c-.015.004-.03.008-.045.012z"/></svg>
        <span>LinkedIn</span>
      </a>
    </div>
  </div>
</div>

Componente Pulsanti di condivisione social

Componente Social Share Buttons con microinterazioni, combinazione di colori in scala di grigi, complessità moderata per le interfacce dei social media, design reattivo con supporto per temi scuri.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="flex space-x-4 p-4 rounded-lg shadow-lg bg-white dark:bg-gray-800">

    <!-- Facebook Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M14 13.5H16.5L17.5 9.5H14V6.5C14 5.48473 14.156 5.24436 14.6293 4.96695C15.1027 4.68953 15.6568 4.5 16.0357 4.5H17.5V0.849C17.2023 0.816436 16.2943 0.75 15.1633 0.75C12.8711 0.75 11.2335 2.1265 11.2335 4.88457V9.5H8.5V13.5H11.2335V23.25H14V13.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-500 dark:bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-400 dark:hover:bg-blue-500 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M22.46 6C21.64 6.36 20.76 6.61 19.86 6.74C20.79 6.18 21.46 5.34 21.82 4.3C20.93 4.84 19.98 5.22 18.96 5.43C18.13 4.56 16.92 4 15.58 4C12.87 4 10.63 6.22 10.63 8.94C10.63 9.38 10.68 9.8 10.79 10.2C7.38 8.44 5.02 5.56 3.4 2.5C2.97 3.24 2.76 4.08 2.76 4.95C2.76 6.7 3.69 8.27 5.16 9.19C4.31 9.17 3.49 8.93 2.76 8.5V8.5C2.76 10.87 4.41 12.87 6.64 13.33C6.22 13.44 5.79 13.49 5.35 13.49C5.04 13.49 4.74 13.46 4.44 13.39C5.07 15.34 6.89 16.82 9.08 16.86C7.3 18.23 5.08 19.06 2.76 19.06C2.37 19.06 1.99 19.04 1.62 18.99C3.84 20.44 6.47 21.25 9.28 21.25C15.55 21.25 19.02 15.93 19.02 11.2V10.7C19.68 10.15 20.26 9.5 20.74 8.78C20.1 9.15 19.4 9.4 18.66 9.5Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-400 dark:bg-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-blue-800 dark:hover:bg-blue-900 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20.447 20.452H15.962V13.816C15.962 12.181 15.207 11.018 13.731 11.018C12.585 11.018 11.859 11.83 11.531 12.639C11.406 12.946 11.378 13.342 11.378 13.738V20.452H6.941V6.993H11.378V8.922C11.968 7.822 13.076 6.782 15.226 6.782C18.175 6.782 20.447 8.653 20.447 13.382V20.452ZM2.542 4.792C1.144 4.792 0 3.714 0 2.436C0 1.159 1.144 0.081 2.542 0.081C3.898 0.081 5.042 1.159 5.042 2.436C5.042 3.714 3.898 4.792 2.542 4.792ZM4.721 20.452H0.285V6.993H4.721V20.452Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-blue-700 dark:bg-blue-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="group relative flex items-center justify-center p-3 rounded-full bg-gray-200 dark:bg-gray-700 
                       hover:bg-pink-600 dark:hover:bg-pink-700 transition-all duration-300 ease-in-out 
                       transform hover:-translate-y-1 hover:scale-110 overflow-hidden">
      <svg class="w-6 h-6 text-gray-700 dark:text-gray-300 group-hover:text-white transition-colors duration-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2C8.686 2 8.257 2.012 6.974 2.07C5.69 2.128 4.734 2.378 3.89 2.709C2.96 3.067 2.185 3.655 1.54 4.298C0.898 4.94 0.312 5.714 0.003 6.645C-0.08 7.042 -0.009 7.439 0 7.836V16.164C0.009 16.561 0.08 16.958 0.003 17.355C0.312 18.286 0.898 19.06 1.54 19.702C2.185 20.345 2.96 20.933 3.89 21.291C4.734 21.622 5.69 21.872 6.974 21.93C8.257 21.988 8.686 22 12 22C15.314 22 15.743 21.988 17.026 21.93C18.31 21.872 19.266 21.622 20.11 21.291C21.04 20.933 21.815 20.345 22.46 19.702C23.102 19.06 23.688 18.286 23.997 17.355C24.08 16.958 24.009 16.561 24 16.164V7.836C24.009 7.439 24.08 7.042 23.997 6.645C23.688 5.714 23.102 4.94 22.46 4.298C21.815 3.655 21.04 3.067 20.11 2.709C19.266 2.378 18.31 2.128 17.026 2.07C15.743 2.012 15.314 2 12 2ZM12 4C15.289 4 15.69 4.013 16.93 4.068C18.152 4.123 18.784 4.303 19.262 4.475C19.742 4.647 20.082 4.887 20.407 5.212C20.732 5.537 20.972 5.877 21.144 6.357C21.316 6.835 21.496 7.468 21.551 8.69C21.606 9.932 21.619 10.332 21.619 12C21.619 13.668 21.606 14.068 21.551 15.308C21.496 16.53 21.316 17.162 21.144 17.64C20.972 18.118 20.732 18.458 20.407 18.783C20.082 19.108 19.742 19.348 19.262 19.52C18.784 19.692 18.152 19.872 16.93 19.927C15.69 19.982 15.289 19.995 12 19.995C8.711 19.995 8.31 19.982 7.07 19.927C5.848 19.872 5.216 19.692 4.738 19.52C4.258 19.348 3.918 19.108 3.593 18.783C3.268 18.458 3.028 18.118 2.856 17.64C2.684 17.162 2.504 16.53 2.449 15.308C2.394 14.068 2.381 13.668 2.381 12C2.381 10.332 2.394 9.932 2.449 8.69C2.504 7.468 2.684 6.835 2.856 6.357C3.028 5.877 3.268 5.537 3.593 5.212C3.918 4.887 4.258 4.647 4.738 4.475C5.216 4.303 5.848 4.123 7.07 4.068C8.31 4.013 8.711 4 12 4ZM12 8C9.791 8 8 9.791 8 12C8 14.209 9.791 16 12 16C14.209 16 16 14.209 16 12C16 9.791 14.209 8 12 8ZM12 14C10.897 14 10 13.103 10 12C10 10.897 10.897 10 12 10C13.103 10 14 10.897 14 12C14 13.103 13.103 14 12 14ZM18.529 6.27C18.125 6.27 17.79 5.935 17.79 5.531C17.79 5.127 18.125 4.792 18.529 4.792C18.933 4.792 19.268 5.127 19.268 5.531C19.268 5.935 18.933 6.27 18.529 6.27Z"/>
      </svg>
      <span class="absolute top-0 left-0 w-full h-full bg-pink-500 dark:bg-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out scale-0 group-hover:scale-100 rounded-full"></span>
    </a>

  </div>
</div>

Componente Pulsanti di condivisione social

Un componente minimalista dei pulsanti di condivisione social progettato per le dashboard, caratterizzato da una combinazione di colori vivaci e un design reattivo, con supporto per la modalità scura.

Apri anteprima

                <div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

Componente Pulsanti di condivisione social

Un componente reattivo dei pulsanti di condivisione social progettato in uno stile glassmorphism con una combinazione di colori monocromatica per i siti di e-commerce. È dotato di elementi traslucidi simili al vetro smerigliato, include più pulsanti interattivi per la condivisione sui social media e supporta la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
        <h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
    </div>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
        </a>
        <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
            <img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
        </a>
    </div>
</div>

Componente reattivo dei pulsanti di condivisione social con supporto per temi scuri, design brutalista, combinazione di colori analoga e interazioni complesse, costruito con Tailwind CSS per un sito Web di portfolio.

Apri anteprima

                <div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

    <!-- Social Share Button 1 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-yellow-500 text-3xl">
          <i class="fab fa-twitter"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
          <p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Tweet
      </button>
    </div>

    <!-- Social Share Button 2 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-orange-500 text-3xl">
          <i class="fab fa-facebook-f"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
          <p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Share
      </button>
    </div>

    <!-- Social Share Button 3 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-red-500 text-3xl">
          <i class="fab fa-pinterest-p"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
          <p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Pin It
      </button>
    </div>

    <!-- Social Share Button 4 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-blue-500 text-3xl">
          <i class="fab fa-linkedin-in"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
          <p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Connect
      </button>
    </div>

  </div>
</div>

Componente Pulsanti di condivisione social

Pulsanti di condivisione social reattivi con stile Glassmorphism e colori vivaci, progettati per blog e consumo di contenuti.

Apri anteprima

                <div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Facebook">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
            <span class="text-white ml-2">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Twitter">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
            <span class="text-white ml-2">Twitter</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on LinkedIn">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
            <span class="text-white ml-2">LinkedIn</span>
        </a>
    </div>
</div>

Pulsanti di condivisione social del tono della terra scheumorfo

Una serie di pulsanti di condivisione social con un design Skeuomorphic che utilizza i toni della terra. Le caratteristiche includono il layout reattivo e il supporto della modalità oscura con effetti di stampa interattivi al passaggio del mouse, costruiti esclusivamente con le classi HTML e Tailwind CSS.

Apri anteprima

                <div class="flex justify-center p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <div class="flex space-x-4 md:space-x-6 flex-wrap justify-center w-full max-w-lg gap-y-4">

    <!-- Facebook Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Facebook">
       <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.675 0H1.325C0.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.691v-3.621h3.129V8.41c0-3.11 1.893-4.82 4.66-4.82 1.314 0 2.417.097 2.745.141v3.208h-1.949c-1.534 0-1.841.724-1.841 1.793v2.358h3.56L19.524 14.71h-3.154V24h6.294c0.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
    </a>

    <!-- Twitter Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Twitter">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.716 11.492H16.35l-5.21-6.893L6.66 21.75H3.34l8.495-9.52-8.046-9.488h7.56zm-.493 1.374L5.207 21.02h3.75l9.138-12.874h-7.81z"/></svg>
    </a>

    <!-- Instagram Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on Instagram">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C8.74 0 8.333.014 7.053.072 5.775.132 4.9.333 4.073.668c-.844.331-1.592.726-2.34 1.473S.998 3.228.668 4.073c-.333.836-.534 1.701-.592 2.98-.058 1.28-.072 1.69-.072 4.9s.014 3.62.072 4.9c.058 1.278.259 2.144.592 2.977.33.844.726 1.592 1.473 2.34s1.5.998 2.34 1.473c.835.331 1.7.534 2.978.592 1.28.058 1.689.072 4.9.072s3.62.014 4.9-.072c1.277-.058 2.144-.259 2.977-.592.844-.33 1.592-.726 2.34-1.473s.998-1.5 1.473-2.34c.331-.836.534-1.7.592-2.977.058-1.28.072-1.69.072-4.9s-.014-3.62-.072-4.9c-.058-1.278-.259-2.144-.592-2.977-.33-.844-.726-1.592-1.473-2.34S20.772.998 19.927.668c-.835-.333-1.7-.534-2.978-.592C16.38.014 15.97.001 12 0zm0 2.16c3.203 0 3.585.016 4.85.074 1.05.049 1.791.217 2.41.465.639.254 1.129.596 1.597 1.064s.81 1.007 1.063 1.645c.248.62.416 1.36.465 2.41.058 1.264.074 1.646.074 4.85s-.016 3.585-.074 4.85c-.049 1.05-.217 1.791-.465 2.41-.254.639-.596 1.129-1.064 1.597s-1.007.81-1.645 1.063c-.62.248-1.36.416-2.41.465-1.264.058-1.646.074-4.85.074s-3.585-.016-4.85-.074c-1.05-.049-1.791-.217-2.41-.465-.639-.254-1.129-.596-1.597-1.064s-.81-1.007-1.063-1.645c-.248-.62-.416-1.36-.465-2.41C2.16 15.585 2.14 15.203 2.14 12s.016-3.585.074-4.85c.049-1.05.217-1.791.465-2.41.254-.639.596-1.129 1.064-1.597S3.29 3.361 3.929 3.106c.62-.248 1.36-.416 2.41-.465C8.414 2.16 8.796 2.14 12 2.14zm0 3.615a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm0 2.16a2.34 2.34 0 1 1 0 4.68 2.34 2.34 0 0 1 0-4.68z"/></svg>
    </a>

    <!-- LinkedIn Button -->
    <a href="#" class="w-16 h-16 p-4 rounded-xl flex items-center justify-center
                      bg-neutral-200 text-stone-700
                      shadow-[4px_4px_8px_#a3a3a3] shadow-[-4px_-4px_8px_#f5f5f5]
                      dark:bg-neutral-800 dark:text-stone-300
                      dark:shadow-[4px_4px_8px_#404040] dark:shadow-[-4px_-4px_8px_#737373]
                      transition transform duration-200 ease-in-out
                      hover:shadow-[inset_2px_2px_5px_#a3a3a3,_inset_-2px_-2px_5px_#f5f5f5] hover:scale-95
                      dark:hover:shadow-[inset_2px_2px_5px_#404040,_inset_-2px_-2px_5px_#737373]"
        aria-label="Share on LinkedIn">
      <svg class="w-full h-full" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302zM3.633 7.514c-1.002-.02-1.28.737-1.28 1.618c0 .88.282 1.617 1.28 1.637c.998.02 1.28-.737 1.28-1.617c0-.88-.282-1.618-1.28-1.638zm-.013-2.5c-1.328 0-2.158.891-2.158 2.035c0 1.143.83 2.035 2.148 2.035c1.328 0 2.157-.891 2.157-2.035c-.014-1.144-.83-2.035-2.147-2.035h.01zM6.88 20.452H3.633V11h3.25zm14.104 0h-3.554v-5.569c0-1.328-.027-3.04-.826-4.068c-.796-1.029-1.835-1.675-3.305-1.675c-2.137 0-3.205 1.578-3.205 4.125v5.187H6.88v-9.45h3.388v1.452h.046c.447-.863 1.607-1.77 3.29-1.77C17.357 8.116 18 9.769 18 12.15v8.302z"/></svg>
    </a>

  </div>
</div>

Componente Pulsanti di condivisione social

Componente pulsanti di condivisione social per l'interfaccia utente in modalità scura, utilizza Tailwind CSS, combinazione di colori in scala di grigi, complessità semplice, per scopi di portfolio, design reattivo con supporto per tema scuro.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-black">
  <div class="flex space-x-4 p-4 bg-gray-800 dark:bg-gray-900 rounded-lg">
    <a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2C6.475 2 2 6.475 2 12c0 4.215 2.582 7.775 6.32 9.34.46.085.59-.2.59-.44v-1.54c-2.53.55-3.06-.83-3.06-.83-.4-.99-.98-1.26-.98-1.26-.78-.53.06-.52.06-.52.86.06 1.32.88 1.32.88.76 1.3 1.99.92 2.48.7.08-.54.3-.92.55-1.13-1.9-.21-3.91-.95-3.91-4.21 0-.93.33-1.68.88-2.27-.09-.21-.38-1.07.08-2.22 0 0 .7-.22 2.2.83.66-.18 1.36-.27 2.07-.27.71 0 1.41.09 2.07.27 1.5-1.05 2.2-.83 2.2-.83.46 1.15.17 2.01.08 2.22.55.59.88 1.34.88 2.27 0 3.27-2.01 3.99-3.92 4.2.3.26.58.76.58 1.52v2.24c0 .24.13.52.59.44C19.42 19.775 22 16.215 22 12 22 6.475 17.525 2 12 2z"/>
      </svg>
    </a>

    <a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M8.29 20.5c-1.7.37-3.34.33-4.76-.25C.9 19.24 1.97 16.26 3.56 15c.71-.54 1.46-1.03 2.26-1.46 1.05-.56 2.08-1.12 3.1-.68 1.02.44 1.47 1.56 1.47 2.64 0 .4-.02.8-.06 1.19.73-.13 1.46-.25 2.18-.38.8-.08 1.6.01 2.4.27 1.57.52 2.73 1.74 3.27 3.3.4-.13.79-.26 1.19-.39 1.-.32 2.1-.21 3 .08-.76.41-1.5.84-2.24 1.26.83 1.1 1.34 2.23 1.5 3.47.02.2.04.39.06.59-.79-.4-1.6-.79-2.4-1.19-1.2-.66-2.4-.98-3.6-.99h-.02c-.88.01-1.76.05-2.64.12-.62.05-1.2.13-1.77.25zM6.53 10.15c-2.24-.37-3.98-2.34-3.98-4.8 0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.46-1.74 4.43-3.98 4.8.01.66.08 1.33.19 1.99.39.26.8.47 1.2.68.6-.1 1.2-.2 1.81-.36-.41-1.32-1.13-2.44-2.09-3.3-.63-.57-1.31-1.06-2.02-1.48a5.65 5.65 0 00-.95-1.82 3.09 3.09 0 01-1.63-2.78c0-1.71 1.39-3.1 3.1-3.1s3.1 1.39 3.1 3.1c0 .76-.27 1.46-.74 2.03-.43.52-.96.96-1.57 1.33 1.29 1.24 2.08 2.99 2.08 4.9 0 .51-.03 1.02-.1 1.53-1.68-.3-3.4-.4-5.12-.33-.72-1.76-.94-3.84-.51-5.79z"/>
      </svg>
    </a>

    <a href="#" class="text-gray-400 hover:text-white dark:hover:text-gray-300">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path fill-rule="evenodd" d="M12 2c-5.523 0-10 4.477-10 10 0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-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.33v6.988C18.342 21.128 22 16.991 22 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
      </svg>
    </a>
  </div>
</div>

Componente Pulsanti di condivisione social

Componente Social Share Buttons con design brutale, combinazione di colori vivaci e livello di complessità complesso per l'e-commerce, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Niente JavaScript.

Apri anteprima

                <div class="bg-yellow-400 p-6 min-h-screen flex items-center justify-center dark:bg-gray-900">
  <div class="flex flex-wrap space-x-4">
    <!-- Share Button 1 -->
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-red-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500">
      Share on X
    </button>

    <!-- Share Button 2 -->
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-blue-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-500">
      Share on Facebook
    </button>

    <!-- Share Button 3 -->
    <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-green-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-500">
      Share on LinkedIn
    </button>

    <!-- Share Button 4 -->
    <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-purple-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500">
      Share on Pinterest
    </button>

    <!-- Share Button 5 -->
    <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-pink-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-500">
      Copy Link
    </button>
  </div>
</div>

Pulsanti di condivisione social skeuomorfi

Componente reattivo dei pulsanti di condivisione social con design scheumorfo, combinazione di colori monocromatica e interazioni complesse, con supporto per temi scuri. Progettato per blog e siti di contenuti.

Apri anteprima

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="flex space-x-4">

        <!-- Facebook Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-600 dark:bg-blue-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path 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.299c-1.213 0-1.587.753-1.587 1.517V12h3.328l-.53 3.663h-2.798V22c4.781-.75 8.437-4.887 8.437-9.878z" />
                </svg>
            </div>
        </a>

        <!-- Twitter Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-400 dark:bg-blue-600 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" 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-.004-.357-.012-.534A8.358 8.358 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.103 4.103 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.273 4.134 4.134 0 001.27 5.477A4.073 4.073 0 014 10.20c0 .038 0 .077.01.116A11.703 11.703 0 0012.31 21.5a4.141 4.141 0 01-1.854-.054 4.002 4.002 0 01-1.495-.385 4.017 4.017 0 002.965-1.636c-.379-.09-.73-.28-1.014-.542-.283-.263-.51-.59-.656-.954a4.102 4.102 0 01-.166-1.095v-.049c.39.22.84.38 1.301.407a4.011 4.011 0 01-1.791-3.5z" />
                </svg>
            </div>
        </a>

        <!-- LinkedIn Button -->
        <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-blue-700 dark:bg-blue-900 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill-rule="evenodd" 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.583-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
                </svg>
            </div>
        </a>

         <!-- Pinterest Button -->
         <a href="#" class="block bg-gray-300 dark:bg-gray-700 p-4 rounded-xl shadow-xl hover:shadow-2xl transform hover:-translate-y-1 transition-all duration-300">
            <div class="flex items-center justify-center w-12 h-12 bg-red-600 dark:bg-red-800 text-white rounded-full shadow-lg">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 0C6.477 0 2 4.477 2 10a8.015 8.015 0 002.161 5.411c-.066.241-.19.763-.217.862-.046.168-.113.471-.127.524-.014.052-.024.08-.024.08l-.001.003a1.04 1.04 0 01-.188.505 1 1 0 00.951 1.349l2.436-.002c.321 0 .627-.148.824-.404.196-.256.392-.786.476-1.042.284-.86.776-2.3.776-2.3.208.36.519.687.89.927A7.947 7.947 0 0012 18a8 8 0 100-16zM8.5 13C7.67 13 7 12.33 7 11.5S7.67 10 8.5 10 10 10.67 10 11.5 9.33 13 8.5 13zm7-2c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8 17 8.67 17 9.5 16.33 11 15.5 11z"/>
                </svg>
            </div>
        </a>

    </div>
</div>

Categorie

Pulsanti di condivisione social