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

Komponente "Medien einbetten"

Eine Medieneinbettungskomponente mit einem 3D-Designstil für Tiefe und Engagement, reaktionsschnelle Effekte und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105 shadow-lg dark:shadow-2xl">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-lg" />
        <div class="ml-3">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <div class="mb-4">
        <iframe class="w-full h-64 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div>
        <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac neque euismod, scelerisque erat a, sollicitudin odio. Integer ac venenatis elit.
        </p>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a202c;
    }
}
</style>

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

Komponente "Medien einbetten"

Glassmorphism Media Embed Component mit Erdtönen für Business-/Unternehmenswebsites. Einfaches Layout, reaktionsschnelle und dunkle Designunterstützung.

Offen

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.

Offen