Industrial_Monochrome_Blog_Card

<div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              flex flex-col md:flex-row">

    <!-- Image Section -->
    <div class="md:w-1/2 overflow-hidden flex-shrink-0">
      <img class="w-full h-64 sm:h-72 md:h-full object-cover object-center transform hover:scale-105 transition duration-500 ease-in-out"
           src="https://picsum.photos/seed/industrial-blog/800/600" alt="Industrial Blog Post Image">
    </div>

    <!-- Content Section -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
      <div>
        <!-- Category & Date -->
        <div class="mb-3 flex items-center space-x-3 text-sm">
          <span class="px-3 py-1 rounded-full text-white bg-red-600 dark:bg-red-500 font-medium tracking-wide uppercase text-xs">
            Design
          </span>
          <span class="text-gray-600 dark:text-gray-400">• March 15, 2024</span>
        </div>

        <!-- Title -->
        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-4">
          The Raw Beauty of Industrial Design Principles
        </h1>

        <!-- Excerpt -->
        <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
          Explore how utilitarian aesthetics and exposed materials shape the future of modern architecture and product design, embracing honesty in construction.
        </p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2 mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Architecture</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Minimalism</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Materials</span>
        </div>
      </div>

      <!-- Author and Read More -->
      <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
        <div class="flex items-center mb-4 sm:mb-0">
          <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-red-600 dark:border-red-500"
               src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">Jane Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Lead Designer</p>
          </div>
        </div>

        <a href="#" class="inline-flex items-center text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-300 
                          font-medium transition-colors duration-200 text-base sm:text-lg group">
          Read Article
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-200"
               viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

  </div>
</div>