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 "Medien einbetten"

Eine reaktionsschnelle Media Embed-Komponente mit Glassmorphism-Design, Erdtonfarben und Unterstützung für den Dunkelmodus, die mit Tailwind CSS für Anwendungsfälle in sozialen Medien erstellt wurde. Enthält einen Milchglaseffekt und verwendet Platzhalterbilder/Avatare.

Offen

Einbettungskomponente für neumorphe Medien

Eine komplexe, neumorphe Medieneinbettungskomponente mit lebendigen Farben, die für CRM/Business-Tools entwickelt wurde und einen Videoplayer, zugehörige Inhalte und interaktive Steuerelemente mit vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus präsentiert.

Offen

Komponente zum Einbetten von Medien

Eine einfache, reaktionsschnelle Medieneinbettungskomponente mit Cyberpunk- und Corporate Blue-Ästhetik, die für Social-Media-Schnittstellen mit Unterstützung des Dunkelmodus entwickelt wurde.

Offen