CCHub Logo CCHub Tailwind Collection
Komponenten Medien einbetten Komponente "Medien einbetten"

Komponente "Medien einbetten"

Eine einfache, reaktionsschnelle Medieneinbettungskomponente mit Graustufen-3D-Design und Unterstützung für den Dunkelmodus, die für Unternehmenswebsites geeignet ist. Verwendet Tailwind CSS für das Styling.

Vorschau

HTML-Code 

<div class="relative flex items-center justify-center h-96 overflow-hidden bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg m-4">

  <!-- 3D effect background elements (simplified) -->
  <div class="absolute inset-0 z-0 pointer-events-none transform scale-150">
    <div class="absolute inset-0 bg-gradient-to-br from-gray-300 via-gray-100 to-gray-300 dark:from-gray-700 dark:via-gray-900 dark:to-gray-700 opacity-50"></div>
    <div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-800 rounded-lg transform rotate-3"></div>
  </div>

  <!-- Content area -->
  <div class="relative z-10 p-8 bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl max-w-md text-center">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Embed Media</h2>
    
    <!-- Placeholder for embedded media (e.g., iframe for YouTube,- Vimeo) -->
    <!-- Replace with actual embed code -->
    <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400">
      <p>Media Placeholder</p>
    </div>

    <p class="mt-4 text-gray-600 dark:text-gray-300 text-sm">Embed your videos, maps, or other media here.</p>

  </div>

</div>

Verwandte Komponenten

Komponente "Medien einbetten"

Eine minimalistische und flache Design-Medieneinbettungskomponente mit Erdtönen, die für Geschäfts-/Unternehmenswebsites geeignet ist. Es handelt sich um eine Komponente mittlerer Komplexität mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es ist kein JavaScript enthalten.

Offen

Media Embed Component - Minimalistische Erdtöne

Eine minimalistische Medieneinbettungskomponente für Dashboards mit responsivem Design und Unterstützung für dunkle Themen in Erdtönen. Es werden ein Videoplayer, ein Titel, eine Beschreibung und Kanalinformationen angezeigt.

Offen

Komponente "Medien einbetten"

Eine responsive Medieneinbettungskomponente mit 3D-Designelementen und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen