CCHub Logo CCHub Tailwind Collection
Komponenten Medien-Komponenten Glassmorphic Media-Komponente

Glassmorphic Media-Komponente

Eine reaktionsschnelle Medienkartenkomponente mit einem Glasmorphismus-Design (Milchglaseffekt), die mit Tailwind CSS erstellt wurde. Enthält einen Bildplatzhalter (von picsum.photos) mit einem Hover-Reveal-Play-Symbol, Textinhalt, einen Autorenbereich mit einem Avatar (von randomuser.me) und Aktionsschaltflächen. Die Komponente unterstützt den Dunkelmodus mit Tailwind CSS 'dark:'-Varianten und reagiert auf verschiedene Bildschirmgrößen. Es ist kein JavaScript erforderlich. Platzieren Sie diese Komponente für einen optimalen visuellen Effekt auf einem kontrastierenden Hintergrund. Die Funktionalität des Dunkelmodus setzt eine entsprechende Tailwind-CSS-Konfiguration voraus (z. B. 'darkMode: "class"' in Ihrem tailwind.config.js).

Vorschau

HTML-Code 

<div class="w-full max-w-md md:max-w-lg lg:max-w-xl overflow-hidden rounded-2xl shadow-2xl bg-white/30 dark:bg-slate-800/30 backdrop-blur-xl border border-white/20 dark:border-slate-700/20 font-sans">
  <!-- Image -->
  <div class="relative">
    <img class="w-full h-56 sm:h-64 object-cover" src="https://picsum.photos/seed/mediacomp/800/600" alt="Media placeholder image">
    <div class="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
      <svg class="w-16 h-16 text-white/80" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
    </div>
  </div>

  <!-- Content Area -->
  <div class="p-5 sm:p-6">
    <h2 class="text-2xl sm:text-3xl font-bold text-slate-800 dark:text-white mb-2">
      Glassmorphic Media Showcase
    </h2>
    <p class="text-slate-600 dark:text-slate-300 text-sm sm:text-base leading-relaxed mb-4">
      Discover the elegance of glassmorphism. This component blends translucent effects with content, offering a modern UI experience that is both responsive and dark-mode ready.
    </p>

    <!-- Author/Meta Info -->
    <div class="flex items-center space-x-3 mt-4">
      <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full border-2 border-white/50 dark:border-slate-700/50 shadow-md" src="https://randomuser.me/api/portraits/women/34.jpg" alt="Author Avatar">
      <div>
        <p class="text-sm sm:text-base font-semibold text-slate-700 dark:text-slate-200">Alexia Glass</p>
        <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400">Content Creator | 3 hours ago</p>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="mt-6 flex flex-col sm:flex-row sm:space-x-3 space-y-3 sm:space-y-0">
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-indigo-600 hover:bg-indigo-700 text-white 
                     dark:bg-indigo-500 dark:hover:bg-indigo-600 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        View Details
      </button>
      <button class="w-full sm:flex-1 px-4 py-2.5 rounded-lg text-sm font-medium 
                     bg-white/50 hover:bg-white/70 text-slate-700 
                     dark:bg-slate-700/50 dark:hover:bg-slate-700/70 dark:text-slate-200 
                     border border-white/60 dark:border-slate-600/60 
                     focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-white/30 dark:focus:ring-offset-slate-800/30 
                     transition-all duration-200">
        Bookmark
      </button>
    </div>
  </div>
</div>

Verwandte Komponenten

Komponente "Medienkomponenten"

Eine reaktionsschnelle Medienkomponente mit Mikrointeraktionen und ansprechenden Animationen, die mit Tailwind CSS gestaltet wurde. Es unterstützt dunkle Themen und enthält Platzhalterbilder und Avatare.

Offen

Komponente "Medienkomponenten"

Eine Medienkomponente im Brutalismus-Stil, die ein fettes Layout mit hohem Kontrast, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS präsentiert.

Offen

Komponente "Medienkomponenten"

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

Offen