Skeuomorphism Grid Layout コンポーネント

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 bg-gray-200 dark:bg-gray-800 font-sans">

  <!-- Skeuomorphic Card 1 -->
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl dark:shadow-xl dark:ring-1 dark:ring-inset dark:ring-white/10 overflow-hidden border border-gray-300 dark:border-gray-600">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Random image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
    </div>
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Card Title 1</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This is a description for the first card, showcasing some content within a skeuomorphic design context.</p>
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-gray-100 leading-none">John Smith</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on May 15, 2023</p>
        </div>
      </div>
    </div>
    <div class="px-6 py-4 bg-gray-100 dark:bg-gray-700 border-t border-gray-300 dark:border-gray-600">
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-none transform transition-transform duration-200 hover:scale-105">
        Read More
      </button>
    </div>
  </div>

  <!-- Skeuomorphic Card 2 -->
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl dark:shadow-xl dark:ring-1 dark:ring-inset dark:ring-white/10 overflow-hidden border border-gray-300 dark:border-gray-600">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Random image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
    </div>
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Card Title 2</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">Here's another example card, demonstrating responsive behavior and dark mode styling.</p>
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar of user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-gray-100 leading-none">Jane Doe</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on May 16, 2023</p>
        </div>
      </div>
    </div>
    <div class="px-6 py-4 bg-gray-100 dark:bg-gray-700 border-t border-gray-300 dark:border-gray-600">
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-none transform transition-transform duration-200 hover:scale-105">
        Learn More
      </button>
    </div>
  </div>

  <!-- Skeuomorphic Card 3 -->
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl dark:shadow-xl dark:ring-1 dark:ring-inset dark:ring-white/10 overflow-hidden border border-gray-300 dark:border-gray-600">
    <div class="relative">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Random image">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
    </div>
    <div class="p-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Card Title 3</h3>
      <p class="text-gray-700 dark:text-gray-300 text-base mb-4">This third card completes the layout, showing how the grid adjusts on different screen sizes.</p>
      <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-4 border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar of user">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-gray-100 leading-none">Peter Jones</p>
          <p class="text-gray-600 dark:text-gray-400">Posted on May 17, 2023</p>
        </div>
      </div>
    </div>
    <div class="px-6 py-4 bg-gray-100 dark:bg-gray-700 border-t border-gray-300 dark:border-gray-600">
      <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-none transform transition-transform duration-200 hover:scale-105">
        Discover More
      </button>
    </div>
  </div>

</div>