Компонент компонентов среды стекломорфизма
Медиакомпонент Glassmorphism с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS
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>
```Связанные компоненты
Компоненты мультимедиа
Компонент в стиле Neumorphism для отображения мультимедиа с адаптивным дизайном и поддержкой темных тем.
Компонент компонентов мультимедиа
Медиакомпонент, разработанный в стиле скевоморфизма с использованием Tailwind CSS, с отзывчивыми эффектами и поддержкой темных тем.
Компоненты мультимедиа Компонент 2
Мультимедийный компонент в стиле ретро/винтаж с ностальгическим дизайном, вдохновленным эстетикой 80-х/90-х годов, с отзывчивыми эффектами и поддержкой темных тем, использующий Tailwind CSS.