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 Medienkomponente im Brutalismus-Stil, die ein fettes Layout mit hohem Kontrast, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS präsentiert.

Offen

Einfacher Neumorphismus E-Commerce-Medienkomponente

Medienkomponente im Neumorphism-Stil mit Erdtönen, einfacher Komplexität, für E-Commerce-Websites, mit responsivem Design und Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder.

Offen

Retro-Medienkomponente

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

Offen