CCHub Logo CCHub Tailwind Collection
Komponenten Medien einbetten Retro Media Embed-Komponente

Retro Media Embed-Komponente

Eine reaktionsschnelle Media Embed-Komponente mit einem "Retro/Vintage"-Design, inspiriert von der Ästhetik der 80er/90er Jahre wie alten Röhrenmonitoren und Videorekordern. Es verwendet ein komplementäres Farbschema aus Blaugrün und Orange auf schiefergrauer Basis, geeignet für "Business/Corporate"-Websites. Die Komponente zeichnet sich durch eine moderate Komplexität mit Hover-Effekten auf der Wiedergabeschaltfläche und der Medienminiaturansicht, einer gefälschten REC-Lichtanimation und dekorativen, nicht funktionalen Steuerelementen aus. Es enthält Unterstützung für dunkle Themen mit dem Präfix "dark:" von Tailwind. Der Medienbereich ist für ein Seitenverhältnis von 16:9 ausgelegt (erfordert das Tailwind Aspect-Ratio-Plugin oder einen CSS-Fallback wie padding-bottom-Trick). Es wird ein Platzhalterbild von picsum.photos verwendet.

Vorschau

HTML-Code 

<div class="min-h-screen bg-slate-100 dark:bg-slate-900 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-xl rounded-lg shadow-2xl overflow-hidden border-2 border-slate-400 dark:border-slate-600">
    <!-- Outer Casing - Retro Monitor Look -->
    <div class="bg-slate-300 dark:bg-slate-700 p-2 border-b-2 border-slate-400 dark:border-slate-600">
      <div class="flex items-center space-x-1.5 pl-1">
        <span class="block w-3 h-3 bg-red-500 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-yellow-400 rounded-full opacity-80"></span>
        <span class="block w-3 h-3 bg-green-500 rounded-full opacity-80"></span>
      </div>
    </div>

    <div class="bg-slate-200 dark:bg-slate-800 p-1 sm:p-2">
      <!-- Screen Bezel -->
      <div class="bg-black p-1 sm:p-1.5 rounded-sm shadow-inner">
        <!-- Media Embed Area with Aspect Ratio (requires @tailwindcss/aspect-ratio plugin) -->
        <div class="aspect-w-16 aspect-h-9 relative group overflow-hidden">
          <img src="https://picsum.photos/seed/retrocorp1/1280/720" alt="Retro Media Thumbnail" class="absoluteിക inset-0 w-full h-full object-cover transition-all duration-300 ease-in-out group-hover:opacity-75 filter grayscale group-hover:grayscale-0"/>
          
          <!-- Play Button Overlay -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out bg-black bg-opacity-30 group-hover:bg-opacity-40">
            <button aria-label="Play" class="flex items-center justify-center p-3 sm:p-4 bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-500 text-white rounded-sm shadow-md transform transition-all duration-150 ease-in-out hover:scale-105 border-b-2 border-r-2 border-orange-700 dark:border-orange-500 hover:border-orange-600 dark:hover:border-orange-400 active:border-b-0 active:border-r-0 active:translate-x-px active:translate-y-px">
              <svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <path d="M6 19V5l14 7-14 7z"/>
              </svg>
              <span class="ml-2 text-sm sm:text-base font-semibold hidden md:inline">PLAY</span>
            </button>
          </div>
          
          <!-- Watermark/Branding (subtle, retro) -->
          <div class="absolute bottom-2 right-2 md:bottom-3 md:right-3 flex items-center">
            <span class=

Verwandte Komponenten

Komponente "Medien einbetten"

Eine reaktionsschnelle Medieneinbettungskomponente im Retro-/Vintage-Stil, die dunkle Themen unterstützt und Platzhalterbilder und Avatare enthält.

Offen

Komponente "Medien einbetten"

Eine minimalistische Medieneinbettungskomponente, die für Dashboards mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS entwickelt wurde.

Offen

Komponente "Medien einbetten"

Eine reaktionsschnelle Media Embed-Komponente mit Unterstützung für dunkle Themen, komplexem Layout und komplementärem Farbschema, die für Dashboards entwickelt wurde.

Offen