HTML 代码
<div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 transition-colors duration-300">
<div class="w-full max-w-sm rounded-xl overflow-hidden shadow-lg p-6 bg-white dark:bg-gray-800 transform transition-all duration-300 ease-in-out hover:scale-105">
<div class="relative pb-2/3 rounded-lg overflow-hidden mb-4">
<img class="absolute h-full w-full object-cover" src="https://picsum.photos/400/300?random=1" alt="Profile image">
<div class="absolute inset-0 bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 opacity-25"></div>
</div>
<div class="text-center">
<div class="relative inline-block mb-4 -mt-16">
<img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 object-cover transform transition-all duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<span class="absolute bottom-1 right-1 block h-4 w-4 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-400"></span>
</div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-1 leading-tight">
Jane Doe
</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
28, New York
</p>
<div class="flex justify-center space-x-2 text-sm mb-4">
<span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-purple-500 to-indigo-500">Travel</span>
<span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-indigo-500 to-blue-500">Art</span>
<span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-blue-500 to-teal-500">Music</span>
</div>
<button class="w-full py-3 rounded-lg text-white font-semibold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:from-pink-600 hover:via-red-600 hover:to-yellow-600 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 transition-all duration-300 ease-in-out">
Connect
</button>
</div>
</div>
</div>