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

Art Deco Reisemedien Einbettungskomponente

Eine komplexe, kontrastreiche Medieneinbettungskomponente im Art-Déco-Stil für Reise- und Tourismus-Websites mit geometrischen Mustern, luxuriösem Design und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Entwickelt, um Reiseziele oder Aktivitäten mit einem eingebetteten Mediaplayer, Details und Call-to-Action anzuzeigen.

Offen

Komponente "Medien einbetten"

Eine Medieneinbettungskomponente im Neumorphism-Stil, die für den Konsum von Blogs und Inhalten geeignet ist und ein triadisches Farbschema aufweist. Responsives Design mit Unterstützung für den Dunkelmodus.

Offen

Komponente "Medien einbetten"

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

Offen