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

Komponente "Medienkomponenten"

Eine reaktionsschnelle Medienkomponente mit Mikrointeraktionen und ansprechenden Animationen, die mit Tailwind CSS gestaltet wurde. Es unterstützt dunkle Themen und enthält Platzhalterbilder und Avatare.

Vorschau

HTML-Code 

<div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </div>
</div>

Verwandte Komponenten

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

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

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