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

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.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-xs mx-auto">
    <div class="relative overflow-hidden rounded-lg">
        <img src="https://picsum.photos/400/200" alt="Media" class="w-full h-48 object-cover rounded-lg">
    </div>
    <div class="mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-500 dark:border-gray-300">
            <div class="ml-4">
                <h2 class="text-lg font-semibold dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the media content goes here.</p>
            </div>
        </div>
        <div class="mt-2">
            <button class="bg-gray-800 text-white py-1 px-3 rounded hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Action Button</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente zum Einbetten von Medien

Eine reaktionsschnelle Medieneinbettungskomponente, die mit Skeuomorphismus unter Verwendung eines monochromatischen Farbschemas entwickelt wurde. Es enthält einen Videoplayer, einen Transkriptbereich und Schaltflächen zum Teilen in sozialen Netzwerken. Das Design unterstützt den Dunkelmodus und wurde mit Tailwind CSS erstellt.

Offen

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"

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

Offen