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

Microinteractions_Triadic_Dashboard_Component

Eine reaktionsschnelle Dashboard-Komponente mit triadischem Farbschema, die Mikrointeraktionen für die Benutzerbindung enthält. Verfügt über Datenvisualisierungselemente und -steuerelemente mit vollständiger Unterstützung des Dunkelmodus.

Offen

Funktionale Komponenten

Eine funktionale Komponente mit skeuomorphem Design, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Glassmorphic Music Player-Steuerung

Eine glasmorphe Musikplayer-Steuerungskomponente mit Sepia-/Brauntönen, mit mattglasähnlichen, durchscheinenden Elementen und Unschärfeeffekten. Es ist reaktionsschnell, unterstützt den Dunkelmodus und eignet sich für Musik-Streaming und Audioplattformen.

Offen