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

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Medien einbetten"

Eine responsive Media Embed-Komponente mit Unterstützung für dunkle Designs für Blog-/Content-Websites, die nach Material Design-Prinzipien, einem triadischen Farbschema und moderater Komplexität gestaltet ist. Enthält einen eingebetteten Videoplatzhalter und Links zu verwandten Artikeln.

Offen

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"

Eine reaktionsschnelle Media Embed-Komponente, die auf skeuomorphe Weise gestaltet ist, Erdtonfarben verwendet und für den E-Commerce geeignet ist, mit Unterstützung für dunkle Themen.

Offen