ソーシャル共有ボタンコンポーネント

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