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

Komponente "Medienkomponenten"

Eine komplexe, reaktionsschnelle Medienkomponente für den Konsum von Blog-Inhalten, die im Dunkelmodus mit einem monochromatischen Farbschema gestaltet ist. Es enthält ein Bild, einen Titel, eine Beschreibung und einen Avatar des Autors.

Vorschau

HTML-Code 

<div class="max-w-2xl mx-auto bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <img class="w-full h-48 rounded-lg object-cover mb-4" src="https://picsum.photos/800/400" alt="Media Content">
    <h2 class="text-2xl font-bold mb-2">Article Title</h2>
    <p class="text-gray-400 mb-4">This is a short description of the content that provides a brief overview of what the article is about.</p>
    <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
        <div>
            <p class="text-sm font-semibold">John Doe</p>
            <p class="text-xs text-gray-500">Published on January 1, 2023</p>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Medienkomponenten"

3D-Medienkomponente für soziale Medien mit komplementärem Farbschema, moderater Komplexität und Unterstützung für dunkle Themen.

Offen

Bauhaus Analoge Medienkomponente

Eine responsive Medienkomponente mit einem vom Bauhaus inspirierten Design in einem analogen Farbschema, das für Websites von Behörden und öffentlichen Diensten geeignet ist. Verfügt über geometrische Formen, analoge Primärfarben und Unterstützung für den Dunkelmodus.

Offen

Retro-Medienkomponente

Eine reaktionsschnelle Medienkomponente im Retro-/Vintage-Design, die den Dunkelmodus unterstützt.

Offen