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 einfache und lebendige Komponente zur Anzeige von Inhalten mit Mikrointeraktionen, responsivem Design und Unterstützung für dunkle Themen, die sich für Blogs und den Konsum von Inhalten eignet. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen

Komponente "Inhaltsanzeige"

Eine Content-Display-Komponente mit Glassmorphism-Design mit responsivem Layout und Unterstützung für dunkle Themen.

Offen

Komponente "Inhaltsanzeige"

Eine einfache, reaktionsschnelle Komponente zur Anzeige von Inhalten, die im brutalistischen Stil mit Komplementärfarben gestaltet ist. Geeignet für Geschäfts-/Unternehmenswebsites, die den Dunkelmodus unterstützen.

Offen