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

Medien-Komponenten

Eine Komponente im Neumorphism-Stil für die Medienanzeige mit responsivem Design und Unterstützung für dunkle Themen.

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

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