머티리얼 디자인 블로그 카드

<div class="p-4 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <div class="max-w-sm mx-auto md:max-w-xl lg:max-w-4xl shadow-lg dark:shadow-xl rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-all duration-300 transform hover:scale-[1.01]">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-56 lg:w-64" src="https://picsum.photos/id/1083/800/600" alt="Blog post cover image">
      </div>
      <div class="p-6 md:p-8 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-red-600 dark:text-red-400 font-semibold mb-2">Technology & Trends</div>
          <a href="#" class="block mt-1 text-2xl leading-tight font-extrabold text-orange-800 dark:text-orange-300 hover:underline transition-colors duration-200">
            The Future of AI: Beyond Automation
          </a>
          <p class="mt-3 text-gray-600 dark:text-gray-300 leading-relaxed text-base">
            Explore the transformative power of artificial intelligence as it moves beyond simple automation to reshape industries, society, and daily life. Discover emerging applications and ethical considerations.
          </p>
        </div>

        <div class="mt-6 flex items-center">
          <div class="flex-shrink-0">
            <img class="h-12 w-12 rounded-full object-cover border-2 border-orange-300 dark:border-orange-600" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author avatar">
          </div>
          <div class="ml-4">
            <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Sarah Jenkins</div>
            <p class="text-xs text-gray-500 dark:text-gray-400">Senior AI Researcher • Aug 15, 2023</p>
          </div>
        </div>

        <div class="mt-6 flex justify-end">
          <button class="px-4 py-2 text-sm font-medium rounded-full text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-700 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50 transition-colors duration-200 shadow-md">
            Read More
          </button>
          <button class="ml-3 px-4 py-2 text-sm font-medium rounded-full text-gray-700 dark:text-gray-200 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors duration-200 shadow-md">
            Share
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="mt-8 max-w-sm mx-auto md:max-w-xl lg:max-w-4xl shadow-lg dark:shadow-xl rounded-xl overflow-hidden bg-white dark:bg-gray-800 transition-all duration-300 transform hover:scale-[1.01]">
    <div class="relative pb-[56.25%] overflow-hidden">
      <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/800/450" alt="Another blog post cover image">
      <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-60"></div>
      <div class="absolute bottom-0 left-0 p-6 md:p-8 text-white">
        <div class="uppercase tracking-wide text-sm font-semibold mb-2 text-yellow-300">Creativity & Design</div>
        <a href="#" class="block mt-1 text-2xl leading-tight font-extrabold hover:underline transition-colors duration-200">
          Unlocking Your Inner Artist: A Guide to Creative Thinking
        </a>
      </div>
    </div>
    <div class="p-6 md:p-8">
      <p class="mt-3 text-gray-600 dark:text-gray-300 leading-relaxed text-base">
        Dive into the world of creative exploration and learn techniques to stimulate your imagination, break through mental blocks, and unleash your artistic potential, regardless of your background.
      </p>
      <div class="mt-6 flex items-center">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full object-cover border-2 border-yellow-300 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/24.jpg" alt="Author avatar">
        </div>
        <div class="ml-4">
          <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Michael Davis</div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Art & Design Blogger • Sep 01, 2023</p>
        </div>
      </div>
      <div class="mt-6 flex justify-end">
        <button class="px-4 py-2 text-sm font-medium rounded-full text-white bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors duration-200 shadow-md">
          Explore Article
        </button>
      </div>
    </div>
  </div>

</div>