OAuth ボタンコンポーネント

<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 p-4">
  <h2 class="text-4xl font-extrabold text-white dark:text-gray-100 mb-8 animate-fade-in-down">Join the Future</h2>
  <div class="flex flex-col space-y-4">
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Google
      <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Facebook_F_icon.svg" alt="Facebook Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Facebook
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with GitHub
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-gray-600 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(-5%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 1s infinite;
  }

  @keyframes ping {
    0% {
      transform: scale(0.2); 
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5); 
      opacity: 0;
    }
  }

  .group-hover\:animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
</style>