CCHub Logo CCHub Tailwind Collection
Komponenten Medien-Komponenten Komponente "Medienkomponenten"

Komponente "Medienkomponenten"

Eine Medienkomponente, die im Skeuomorphismus-Stil unter Verwendung von Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Media Title</h2>
            <p class="text-gray-700 dark:text-gray-300">This is a description of the media component. It mimics a real-world object with its skeuomorphic design.</p>
            <div class="flex items-center mt-4">
                <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="ml-3">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Posted by John Doe</p>
                    <p class="text-xs text-gray-500 dark:text-gray-500">2 hours ago</p>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    /* Dark theme support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1A202C;
        }
    }
</style>

Verwandte Komponenten

Industrial_Marketplace_Media_Component

Eine einfache, industriell gestaltete Medienkomponente für einen Marktplatz mit Bild, Titel und Preis, wobei der Schwerpunkt auf Rohstoffen und utilitaristischer Ästhetik liegt. Verwendet Herbstfarben und unterstützt den Dunkelmodus.

Offen

Brutalismus Pastell-Medienkomponente

Eine einfache, brutalistische Medienkomponente mit pastellfarbener Farbgebung, die für einen Blog entworfen wurde. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen

Komponente "Medienkomponenten"

Eine komplexe, reaktionsschnelle, mit dem Dark-Modus kompatible Social-Media-Komponente mit einem Glassmorphism-Stil mit leuchtenden Farben.

Offen