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
Composant multimédia minimaliste
Un composant multimédia simple, propre et réactif pour les sites Web d’entreprise, avec des couleurs bonbons/douces et la prise en charge du mode sombre.
Composant Composants multimédias
Composant multimédia 3D pour les médias sociaux avec une palette de couleurs complémentaire, une complexité modérée et une prise en charge du thème sombre.
Composant Composants multimédias
Un composant de composants multimédias réactif avec un design brutal, des couleurs vives et une mise en page complexe pour un tableau de bord, avec prise en charge du thème sombre et sans JavaScript. Utilise picsum.photos pour les images et randomuser.me pour les avatars.