Componente de componentes de medios de glassmorphism
Componente multimedia de Glassmorphism con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS
Código HTML
```html
<div class="dark:bg-gray-900">
<section class="container mx-auto p-6">
<div class="flex flex-col md:flex-row items-center">
<div class="flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">Media Component</h1>
<p class="mb-8 leading-relaxed text-gray-600 dark:text-gray-300">This is a responsive media component with glassmorphism style and dark theme support.</p>
</div>
<div class="w-full md:w-1/2">
<div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
<img class="object-cover object-center h-full w-full" alt="hero" src="https://picsum.photos/720/600">
</div>
</div>
</div>
<div class="flex flex-wrap -m-4 mt-8">
<div class="p-4 md:w-1/3">
<div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/720/400" alt="content">
<h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
<h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 1</h2>
<p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/721/401" alt="content">
<h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
<h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 2</h2>
<p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
</div>
</div>
<div class="p-4 md:w-1/3">
<div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
<img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/722/402" alt="content">
<h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
<h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 3</h2>
<p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
</div>
</div>
</div>
</section>
</div>
```Componentes relacionados
Brutalismo Booking Componente de Medios
Un componente multimedia simple de estilo brutalista para sistemas de reservas, con alto contraste y un esquema de color complementario, totalmente receptivo con soporte para modo oscuro.
Cyberpunk_Dating_Media_Component
Un componente multimedia responsivo para plataformas de citas/sociales con una estética cyberpunk, con colores dulces brillantes, fondos oscuros y elementos interactivos. Soporta el modo oscuro.
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.