OAuth Buttons Component

<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto text-white">
    <h2 class="text-2xl font-bold mb-4">Connect with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Google</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Facebook</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-green-500 to-blue-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with Twitter</span>
            <i class="fas fa-arrow-right"></i>
        </a>

        <a href="#" class="flex items-center justify-between bg-gradient-to-r from-red-500 to-orange-500 rounded-lg p-4 text-white hover:shadow-lg transition-shadow">
            <img src="https://randomuser.me/api/portraits/women/20.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <span>Continue with LinkedIn</span>
            <i class="fas fa-arrow-right"></i>
        </a>
    </div>
    <p class="text-center mt-4">Or</p>
    <button class="bg-gray-700 hover:bg-gray-600 rounded-lg w-full p-2 mt-2 text-white">Sign Up with Email</button>
</div>