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

Medienkomponenten Komponente 39

Eine Medienkomponente, die mit der Benutzeroberfläche des Dunkelmodus entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs mit Tailwind CSS bietet.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-bold">John Doe</h2>
            <p class="text-gray-400">Posted 2 hours ago</p>
        </div>
    </div>
    <img class="w-full rounded-lg mb-4" src="https://picsum.photos/600/400" alt="Media Content">
    <h3 class="text-lg font-semibold mb-2">Amazing Scenery</h3>
    <p class="text-gray-300">This is a beautiful representation of nature that showcases the stunning landscapes we often take for granted.</p>
    <div class="mt-4 flex justify-between">
        <button class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-300">Like</button>
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Comment</button>
    </div>
</div>

Verwandte Komponenten

Komponente "Medienkomponenten"

Eine reaktionsschnelle Medienkomponente für Finanz-/Bankschnittstellen mit klarem Design, Blautönen und Unterstützung für den Dunkelmodus. Enthält einen Hauptinhaltsbereich mit Bild, Titel, Beschreibung und Aktionsschaltfläche sowie eine Liste verwandter Artikel oder Einblicke.

Offen

Komponente "Medienkomponenten"

Eine Medienkomponente für den E-Commerce mit Mikrointeraktionen, Graustufen-Farbschema, moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen.

Offen

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.

Offen