Componentes Componentes de medios Componente de medios análogos de la Bauhaus

Componente de medios análogos de la Bauhaus

Un componente multimedia responsivo con un diseño inspirado en la Bauhaus, que utiliza una combinación de colores análoga, adecuado para sitios web gubernamentales / de servicio público. Cuenta con formas geométricas, colores análogos primarios y compatibilidad con el modo oscuro.

Vista previa

Código HTML

<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>

Componentes relacionados

Componente de componentes de medios

Un componente multimedia para el comercio electrónico con microinteracciones, combinación de colores en escala de grises, complejidad moderada, diseño receptivo y compatibilidad con temas oscuros.

Abrir

Componente de componentes de medios

Un componente multimedia diseñado en el estilo brutalista, que muestra un diseño audaz con alto contraste, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir

Componente de componentes de medios

Un componente multimedia diseñado con el estilo skeuomorphism utilizando Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.

Abrir