Bauhaus 유사 미디어 구성 요소

<div class="font-sans p-4 sm:p-6 md:p-8 bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 min-h-screen">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-10">

    <!-- Media Card 1: Article/News -->
    <div class="bg-white dark:bg-blue-800 shadow-lg rounded-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] flex flex-col">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Image of a modern building">
      <div class="p-5 flex-grow flex flex-col">
        <div class="uppercase text-xs font-semibold text-blue-600 dark:text-blue-300 mb-1 tracking-wider">Public Announcement</div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">New Urban Development Project Initiated</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200 leading-relaxed mb-4 flex-grow">
          Details on the city's latest initiative to enhance public spaces and infrastructure, focusing on sustainability and community engagement. Learn more about the planned phases and expected impacts.
        </p>
        <div class="flex items-center justify-between text-xs text-blue-500 dark:text-blue-300">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2 border border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/5.jpg" alt="Author Avatar">
            <span class="font-medium">John Doe</span>
          </div>
          <span>Oct 26, 2023</span>
        </div>
      </div>
      <div class="bg-blue-500 dark:bg-blue-700 p-4 border-t border-blue-400 dark:border-blue-600 flex justify-between items-center">
        <a href="#" class="text-white dark:text-blue-100 text-sm font-semibold uppercase hover:underline flex items-center">
          Read More
          <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="text-yellow-200 dark:text-yellow-300 text-xs font-bold">GOV-INFO</span>
      </div>
    </div>

    <!-- Media Card 2: Video/Multimedia -->
    <div class="bg-white dark:bg-blue-800 shadow-lg rounded-lg overflow-hidden border-t-4 border-r-4 border-red-500 dark:border-red-600 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] flex flex-col">
      <div class="relative w-full h-48 bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
        <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/600/400?random=2" alt="Thumbnail for a video presentation">
        <button class="absolute z-10 p-3 rounded-full bg-red-600 text-white dark:bg-red-700 transition-transform duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-opacity-75 focus:ring-red-400">
          <svg class="w-6 h-6" 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">3:45</div>
      </div>
      <div class="p-5 flex-grow flex flex-col">
        <div class="uppercase text-xs font-semibold text-blue-600 dark:text-blue-300 mb-1 tracking-wider">Video Report</div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">Annual Public Service Review 2023</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200 leading-relaxed mb-4 flex-grow">
          Watch the comprehensive review of public services over the past year, highlighting achievements, challenges, and future strategies. Includes interviews with key government officials.
        </p>
        <div class="flex items-center justify-between text-xs text-blue-500 dark:text-blue-300">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2 border border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Presenter Avatar">
            <span class="font-medium">Jane Smith</span>
          </div>
          <span>Nov 15, 2023</span>
        </div>
      </div>
      <div class="bg-red-500 dark:bg-red-700 p-4 border-t border-red-400 dark:border-red-600 flex justify-between items-center">
        <a href="#" class="text-white dark:text-red-100 text-sm font-semibold uppercase hover:underline flex items-center">
          Watch Now
          <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="text-red-200 dark:text-red-300 text-xs font-bold">Official-Vid</span>
      </div>
    </div>

    <!-- Media Card 3: Document/Download -->
    <div class="bg-white dark:bg-blue-800 shadow-lg rounded-lg overflow-hidden border-b-4 border-r-4 border-green-500 dark:border-green-600 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] flex flex-col">
      <div class="relative w-full h-48 bg-gray-100 dark:bg-gray-700 flex items-center justify-center p-4">
        <img class="w-32 h-32 object-contain filter grayscale invert dark:invert-0 brightness-150 dark:brightness-100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/87/PDF_file_icon.svg/1200px-PDF_file_icon.svg.png" alt="PDF Document Icon">
        <div class="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">1.2 MB</div>
      </div>
      <div class="p-5 flex-grow flex flex-col">
        <div class="uppercase text-xs font-semibold text-blue-600 dark:text-blue-300 mb-1 tracking-wider">Official Document</div>
        <h3 class="text-xl font-bold text-blue-900 dark:text-blue-100 mb-3">Public Safety Guidelines and Protocols</h3>
        <p class="text-sm text-blue-700 dark:text-blue-200 leading-relaxed mb-4 flex-grow">
          Download the latest official guidelines for public safety, emergency preparedness, and community response protocols. Essential information for all citizens.
        </p>
        <div class="flex items-center justify-between text-xs text-blue-500 dark:text-blue-300">
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-2 border border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Department Lead Avatar">
            <span class="font-medium">Dept. of Safety</span>
          </div>
          <span>Oct 01, 2023</span>
        </div>
      </div>
      <div class="bg-green-500 dark:bg-green-700 p-4 border-t border-green-400 dark:border-green-600 flex justify-between items-center">
        <a href="#" class="text-white dark:text-green-100 text-sm font-semibold uppercase hover:underline flex items-center">
          Download PDF
          <svg class="ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L10 11.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414zM10 3a1 1 0 011 1v7a1 1 0 11-2 0V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
        </a>
        <span class="text-green-200 dark:text-green-300 text-xs font-bold">PDF-FORM</span>
      </div>
    </div>

  </div>
</div>