HTML 代码
<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">User Profile</h2>
<div class="flex items-center mb-4">
<img class="w-16 h-16 rounded-full shadow-md transform hover:scale-110 transition-transform duration-300" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-gray-600 dark:text-gray-400">Software Developer</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Follow</button>
</div>
<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Images Gallery</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=1" alt="Random Image">
<img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=2" alt="Random Image">
<img class="w-full h-32 object-cover rounded-md shadow-lg transform hover:scale-105 transition-transform duration-300" src="https://picsum.photos/200/200?random=3" alt="Random Image">
</div>
</div>
<div class="p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 mt-6">
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white transition-transform duration-200">Contact Us</h2>
<form>
<input type="text" placeholder="Your Name" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
<input type="email" placeholder="Your Email" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300" />
<textarea placeholder="Your Message" class="border border-gray-300 dark:border-gray-700 rounded-md p-2 mb-4 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300"></textarea>
<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">Send Message</button>
</form>
</div>