HTML 代码
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
<div class="flex justify-center items-center mb-4">
<img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Card</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is an example of a card with a skeuomorphic design approach, featuring gradients and shadows to mimic real-world textures.</p>
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Learn More</button>
</div>
<!-- Card 2 -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
<div class="flex justify-center items-center mb-4">
<img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Interactive Element</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Elements are designed to feel tangible, with hover effects that provide visual feedback, simulating physical interaction.</p>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Details</button>
</div>
<!-- Card 3 -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
<div class="flex justify-center items-center mb-4">
<img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Dark Mode Ready</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">This component includes full support for dark mode, with colors and shadows adjusting seamlessly for a comfortable viewing experience.</p>
<button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Explore Options</button>
</div>
<!-- Card 4 -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
<div class="flex justify-center items-center mb-4">
<img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/picsum/400/300" alt="Placeholder image">
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Image Integration</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Images are integrated with subtle borders and shadows to enhance the skeuomorphic feel, blending them naturally into the design.</p>
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">View Gallery</button>
</div>
<!-- Card 5 -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
<div class="flex justify-center items-center mb-4">
<img class="w-20 h-20 rounded-full border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Responsive Design</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">The grid layout is fully responsive, adapting to different screen sizes while maintaining the skeuomorphic integrity of the design.</p>
<button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Discover More</button>
</div>
<!-- Card 6 -->
<div class="bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 p-6 rounded-lg shadow-xl transform transition duration-500 hover:scale-105">
<div class="flex justify-center items-center mb-4">
<img class="w-full h-48 rounded-md object-cover border-4 border-gray-300 dark:border-gray-600 shadow-lg" src="https://picsum.photos/seed/another/400/300" alt="Placeholder image">
</div>
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customizable</h3>
<p class="text-gray-700 dark:text-gray-300 mb-4">Built with Tailwind CSS, this component is easily customizable, allowing for adjustments to colors, spacing, and other design elements.</p>
<button class="bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded-full shadow-md transition duration-300">Customize Now</button>
</div>
</div>
</div>