拟物化卡片组件

<div class="flex flex-wrap justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 p-10">

  <!-- Card 1 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card1/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Skeuomorphic Card</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This is a skeuomorphic-inspired card with a subtle shadow and rounded corners, designed to look like a physical object.</p>
      <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Developer</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Card 2 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card2/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Interactive Design</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">Combining modern web practices with classic design principles, this card offers a visually engaging experience.</p>
        <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400">Designer</p>
        </div>
      </div>
    </div>
  </div>

    <!-- Card 3 -->
  <div class="m-4 w-72 bg-white dark:bg-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/card3/300/200" alt="Random image">
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Responsive Layout</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base">This card is built with responsiveness in mind, ensuring it looks great on all devices, from desktops to mobile phones.</p>
            <div class="mt-4 flex items-center">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Avatar of random user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400">Project Manager</p>
        </div>
      </div>
    </div>
  </div>

</div>

<style>
/* Custom dark shadow for dark mode skeuomorphism */
.dark\:shadow-xl-dark {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
</style>