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"

Eine reaktionsschnelle Medienkomponente, die von Retro-/Vintage-Designstilen inspiriert ist und sich durch eine nostalgische Ästhetik der 80er/90er Jahre auszeichnet. Es unterstützt dunkles Theme mit Tailwind CSS und enthält Platzhalterbilder und Avatare.

Offen

Minimalistische Medienkomponente

Eine einfache, übersichtliche und reaktionsschnelle Medienkomponente für Unternehmenswebsites mit bonbonfarbenen Farben und Unterstützung für den Dunkelmodus.

Offen

Skeuomorphismus-Medienkomponente

Vom Skeuomorphismus inspirierte Medienkomponente mit monochromatischem Farbschema und komplexem Komplexitätsgrad, zugeschnitten auf Blog-/Content-Zwecke. Zu den Funktionen gehören responsives Design und Unterstützung für dunkle Themen ohne JavaScript.

Offen