教育向けマテリアルデザインコンテンツカード

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
    <!-- Card Header with Image -->
    <div class="relative">
      <img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Course Thumbnail">
      <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
        <h3 class="text-xl font-bold text-white leading-tight">Introduction to Web Development</h3>
      </div>
    </div>

    <!-- Card Content -->
    <div class="p-4 flex flex-col gap-3">
      <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
        Learn the fundamentals of HTML, CSS, and JavaScript to build your first websites. This course is perfect for beginners.
      </p>

      <div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          <span>2h 30m</span>
        </div>
        <div class="flex items-center gap-1">
          <svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          <span>5 Modules</span>
        </div>
      </div>
    </div>

    <!-- Card Footer with Action Button -->
    <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 flex justify-end">
      <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Start Course
      </button>
    </div>
  </div>
</div>