CCHub Logo CCHub Tailwind Collection
Komponenten Interaktive Komponenten Komponente "Interaktive Komponenten"

Komponente "Interaktive Komponenten"

Eine interaktive Social-Media-Komponente, die mit Dunkelmodus und monochromatischem Farbschema entwickelt wurde.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-gray-100 min-h-screen p-6">
    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg">
        <div class="p-4 border-b border-gray-700">
            <h2 class="text-xl font-bold">Interactive Components</h2>
            <p class="text-gray-400">Engage with your network in style.</p>
        </div>
        <div class="flex items-center p-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h3 class="font-semibold">John Doe</h3>
                <p class="text-gray-500 text-sm">@johndoe</p>
            </div>
        </div>
        <div class="p-4">
            <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/500/300" alt="Interactive Image" />
            <p class="mt-2 text-gray-300">This is an example of an interactive post with an image. Feel free to comment and like!</p>
        </div>
        <div class="flex justify-between p-4 border-t border-gray-700">
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Like</button>
            <button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Comment</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Interaktive Komponenten"

Eine minimalistische, lebendige und einfache interaktive Komponente, die für Unterhaltungs- und Medienplattformen entwickelt wurde und über Wiedergabe-/Pausensteuerungen, einen Fortschrittsbalken und eine Lautstärkeregelung für Lautsprecher verfügt. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Komponente "Interaktive Komponenten"

Eine komplexe E-Commerce-Produktkarte mit 3D-Designelementen in einem triadischen Farbschema, das für interaktive Online-Shopping-Erlebnisse mit Responsive- und Dark-Mode-Unterstützung entwickelt wurde.

Offen

Komponente "Interaktive Komponenten"

Interaktive Komponentenkomponente mit minimalistischem/flachem Design, Farbschema in Erdtönen und komplexer Komplexität für einen Dashboard-Zweck, implementiert mit Tailwind CSS. Responsives Design mit Unterstützung für dunkle Themen. Verwendet picsum.photos für Bilder und randomuser.me für Avatare.

Offen