Search Components

Social Share Buttons

Buttons for sharing content to social media

Social Share Buttons Component

Bauhaus-inspired social share buttons for sports/fitness applications, featuring geometric forms and blue tones. Responsive with dark mode support.

Open Preview

                <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>

Social Share Buttons Component

A set of social media share buttons designed with a monospace/developer aesthetic, corporate blue color scheme, and full responsiveness. Includes dark mode support.

Open Preview

                <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>

Social Share Buttons Component

A responsive and minimalist social share buttons component designed with a Swiss/International Typography style, using a grayscale color scheme. It's suitable for job boards or career development platforms, offering clean sharing options for various social media platforms.

Open Preview

                <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>

Social Share Buttons Component - Music/Audio

A set of social share buttons designed for music and audio platforms, featuring a Material Design aesthetic with muted colors and supporting dark mode. Includes buttons for common sharing platforms like Facebook, Twitter, and Email.

Open Preview

                <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>

Social Share Buttons Component

A responsive social share button component for food/restaurant websites, featuring a rainbow gradient, microinteractions on hover, and full dark mode support.

Open Preview

                <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>

Social Share Buttons Component

A set of vibrant, 3D-inspired social share buttons suitable for food and restaurant websites, with full responsiveness and dark mode support.

Open Preview

                <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>

Social Share Buttons Component

An elegant, responsive social share buttons component designed for news and journalism websites, featuring a luxurious forest/green color palette and dark mode support. It includes multiple interactive elements for sharing articles on various platforms.

Open Preview

                <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>

Neumorphic Social Share Buttons - Job/Career Theme

A set of social share buttons designed with a soft neumorphic style and cheerful candy colors, suitable for job boards or career platforms. Features responsive design and dark mode support.

Open Preview

                <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>

Social Share Buttons Component

A simple, responsive social share buttons component with a Memphis design inspired aesthetic using cool neutral colors, suitable for CRM/business tools. Includes dark mode support.

Open Preview

                <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>

Social Share Buttons Component

A playful and fun social share button component designed for gaming websites, featuring a gradient rainbow color scheme, rounded elements, and interactive hover effects. Fully responsive with dark mode support.

Open Preview

                <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>

Search Components

Categories

Social Share Buttons