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

Komponenten für die Inhaltsanzeige

Eine reaktionsschnelle Komponente zur Anzeige von Social-Media-Inhalten, die im skeuomorphen Stil mit Pastellfarben gestaltet wurde und mehrere interaktive Elemente und Unterstützung für den Dunkelmodus bietet.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
    <img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
    <div class="flex justify-between items-center">
        <button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
        <button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
        <button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
    </div>
</div>

Verwandte Komponenten

Verspielte juwelenfarbene Anzeige von Fotografie-Inhalten

Eine komplexe, spielerische und unterhaltsame Komponente zur Anzeige von Inhalten für ein Fotoportfolio oder eine Fotogalerie mit hellen Juwelentönen, abgerundeten Elementen und einem responsiven Design mit Unterstützung für den Dunkelmodus. Es zeigt mehrere interaktive Elemente wie ausgewählte Bilder, Rasterlayouts und Profilabschnitte.

Offen

Immobilienkarte - Schweizer Pastell

Eine einfache, saubere und reaktionsschnelle Immobilieninseratskarte mit einem schweizerischen/internationalen Typografiestil und einem pastellfarbenen Farbschema, geeignet für Immobilienplattformen. Inklusive Unterstützung für den Dunkelmodus.

Offen

Komponente "Komponenten für die Inhaltsanzeige"

Glassmorphism Content Display Komponente mit Erdtönen

Offen