CCHub Logo CCHub Tailwind Collection
Komponenten Medien-Komponenten Glassmorphism Medienkomponenten Komponente

Glassmorphism Medienkomponenten Komponente

Glassmorphism Media Component mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS

Vorschau

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>
```

Verwandte Komponenten

Medienkomponenten Komponente 2

Eine Medienkomponente im Retro-/Vintage-Stil mit einem nostalgischen Design, das von der Ästhetik der 80er/90er Jahre inspiriert ist, mit responsiven Effekten und Unterstützung für dunkle Themen, unter Verwendung von Tailwind CSS.

Offen

Komponente "Medienkomponenten"

Eine komplexe, reaktionsschnelle, mit dem Dark-Modus kompatible Social-Media-Komponente mit einem Glassmorphism-Stil mit leuchtenden Farben.

Offen

Medienkomponenten Komponente 39

Eine Medienkomponente, die mit der Benutzeroberfläche des Dunkelmodus entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs mit Tailwind CSS bietet.

Offen