Glassmorphism Media Components Component
Composant multimédia Glassmorphism avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS
HTML Code
```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>
```Composants associés
Playful_Booking_Media_Component
Un composant multimédia simple, ludique et réactif pour les systèmes de réservation, avec une palette de couleurs triadique, des éléments arrondis et la prise en charge du mode sombre.
Glassmorphism Composant de support pour la fabrication
Un composant multimédia réactif conçu pour les applications industrielles/manufacturières, avec des éléments translucides givrés, des couleurs neutres froides et la prise en charge du mode sombre.
Composant Composants multimédias
Un composant multimédia pour le commerce électronique avec des micro-interactions, une palette de couleurs en niveaux de gris, une complexité modérée, un design réactif et une prise en charge des thèmes sombres.