CCHub Logo CCHub Tailwind Collection
Komponenten Funktionale Komponenten Komponente "Funktionale Komponenten" – Benutzeroberfläche im Dunkelmodus

Komponente "Funktionale Komponenten" – Benutzeroberfläche im Dunkelmodus

Eine reaktionsschnelle Social-Media-Komponente, die mit Dunkelmodus und Erdtönen entwickelt wurde und für Schnittstellen in sozialen Netzwerken geeignet ist. Bietet Benutzer-Avatare, Post-Inhalte und Interaktionsschaltflächen.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

Verwandte Komponenten

Highlight der Gaming-Funktionen

Eine reaktionsschnelle Gaming-Feature-Highlight-Komponente mit einem klaren, minimalistischen Design, das Typografie und ein Rastersystem betont, warme Neutraltöne verwendet und den Dunkelmodus unterstützt. Enthält ein großes Bild, einen Titel, eine Beschreibung und eine Aktionsschaltfläche.

Offen

Komponente "Funktionale Komponenten"

Eine einfache funktionale Komponente mit Unterstützung des Dunkelmodus.

Offen

Komponente "Funktionale Komponenten"

Eine komplexe, reaktionsschnelle Dashboard-Komponente mit einer Monospace-/Entwickler-Ästhetik unter Verwendung kühler Neutraltöne. Verfügt über Datenvisualisierungselemente, terminalähnliche Abschnitte und Unterstützung für den Dunkelmodus.

Offen