CCHub Logo CCHub Tailwind Collection
Komponenten Medien-Komponenten Medien-Komponenten

Medien-Komponenten

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

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-900 hover:shadow-xl transition-shadow duration-300 ease-in-out">
    <div class="mb-4">
        <img src="https://picsum.photos/300/200" alt="Media" class="w-full h-auto rounded-lg shadow-md" />
    </div>
    <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg mr-2">
        <h2 class="text-lg font-semibold dark:text-white">User Name</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300 text-center">
        This is a description of the media content that is displayed above. It's designed with a soft UI style to enhance the visual appeal.
    </p>
</div>

Verwandte Komponenten

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

Brutalismus Pastell-Medienkomponente

Eine einfache, brutalistische Medienkomponente mit pastellfarbener Farbgebung, die für einen Blog entworfen wurde. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen

Medienkomponente für künstlerische Fotografie

Eine komplexe, reaktionsschnelle Medienkomponente für Fotografie-Portfolios mit einem Aquarell-/künstlerischen Designstil und einer Retro-/Vintage-Farbpalette. Enthält mehrere interaktive Elemente und vollständige Unterstützung des Dunkelmodus.

Offen