HTML 代码
<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>