CCHub Logo CCHub Tailwind Collection
Komponenten Medien einbetten Komponente "Medien einbetten"

Komponente "Medien einbetten"

Eine reaktionsschnelle Medieneinbettungskomponente für den E-Commerce mit minimalistischem Design, lebendigen Farben und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl my-10 dark:bg-gray-800">
    <div class="md:flex">
        <div class="md:flex-shrink-0">
            <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/400/300" alt="Product image">
        </div>
        <div class="p-8">
            <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Product Name</div>
            <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Amazing Product Title</a>
            <p class="mt-2 text-gray-500 dark:text-gray-400">This is a brief description of the product, highlighting its key features and benefits. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <div class="mt-4 flex items-center justify-between">
                <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
                <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Einbettungskomponente für skeuomorphe Medien

Eine responsive Media Embed-Komponente mit Skeuomorphismus-Design, analogem Farbschema und moderater Komplexität für Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Komponente "Medien einbetten"

Eine responsive Media Embed-Komponente mit Unterstützung für dunkle Designs für Blog-/Content-Websites, die nach Material Design-Prinzipien, einem triadischen Farbschema und moderater Komplexität gestaltet ist. Enthält einen eingebetteten Videoplatzhalter und Links zu verwandten Artikeln.

Offen

Komponente "Medien einbetten"

Eine minimalistische und flache Design-Medieneinbettungskomponente mit Erdtönen, die für Geschäfts-/Unternehmenswebsites geeignet ist. Es handelt sich um eine Komponente mittlerer Komplexität mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es ist kein JavaScript enthalten.

Offen