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

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

Komponente "Medienkomponenten"

Eine responsive Media Components-Komponente mit einem Brutalismus-Design, lebendigen Farben und einem komplexen Layout für ein Dashboard, mit Unterstützung für dunkle Themen und ohne JavaScript. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Minimalistische Medienkomponente

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

Offen