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 Composants multimédias
Un composant de médias sociaux complexe, réactif et compatible avec le mode sombre avec un style Glassmorphism utilisant des couleurs vives.
Composant Composants multimédias
Un composant multimédia réactif avec des micro-interactions avec des animations attrayantes, conçu avec Tailwind CSS. Il prend en charge le thème sombre et inclut des images et des avatars de substitution.
Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre