スキューモーフィック カード コンポーネント

<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
</div>