CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten für die Inhaltsanzeige Komponente "Inhaltsanzeige"

Komponente "Inhaltsanzeige"

Eine einfache, reaktionsschnelle Inhaltsanzeigekomponente für Social-Media-Schnittstellen, die nach den Prinzipien des Material Designs und einem triadischen Farbschema entwickelt wurde.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto my-8 overflow-hidden">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-gray-700 dark:text-gray-300">
            This is an example of a simple content display component in a social media context, showcasing the Material Design principles with a triadic color scheme.
        </p>
    </div>
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Content Image">
    <div class="p-4">
        <div class="flex justify-between items-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600">Like</button>
            <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-700 dark:hover:bg-green-600">Share</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Komponenten für die Inhaltsanzeige"

Eine Komponente zur Inhaltsanzeige mit Mikrointeraktionen, responsivem Design und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS. Verfügt über subtile Hover-Effekte und fokussiert Animationen auf interaktive Elemente.

Offen

Skeuomorphic_Fashion_Card

Eine einfache, reaktionsschnelle Content-Display-Karte für Mode-/Beauty-Produkte, die mit einer skeuomorphen Ästhetik unter Verwendung von Unternehmensblautönen gestaltet wurde. Enthält Unterstützung für den Dunkelmodus.

Offen

Swiss_International_Typography_Content_Display_Component

Eine saubere, minimalistische Inhaltsanzeigekomponente für Dashboards, die Typografie und Rastersysteme mit coolen, neutralen Farben und voller Reaktionsfähigkeit betont.

Offen