CCHub Logo CCHub Tailwind Collection
Komponenten Soziale Komponenten Komponente "Soziale Komponenten"

Komponente "Soziale Komponenten"

Eine reaktionsschnelle Social-Media-Komponente, die mit dem Neumorphism-Stil und der Unterstützung dunkler Themen entwickelt wurde, mit einem einfachen Layout und minimalen Elementen.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div>
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-300">@john_doe</p>
        </div>
    </div>
    <p class="mt-4 text-gray-800 dark:text-gray-400">Just another day exploring the wonders of nature!</p>
    <img src="https://picsum.photos/400/200" alt="Nature Image" class="mt-4 rounded-lg shadow-lg">
    <div class="mt-4 flex justify-between">
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Like</button>
        <button class="bg-blue-500 text-white rounded-full px-4 py-2 shadow-md hover:bg-blue-600 focus:outline-none">Comment</button>
    </div>
</div>

Verwandte Komponenten

Komponente "Soziale Komponenten"

Eine komplexe, lebendige soziale Komponente für Blog-/Content-Seiten, die sich auf Mikrointeraktionen mit Share-Buttons, Likes, Kommentaren und Speichern konzentriert. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

Skeuomorphismus Soziale Komponente

Social-Media-Komponente mit Skeuomorphismus-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente "Soziale Komponenten"

Eine einfache, reaktionsschnelle Social-Media-Karte für Nachrichten-/Journalismusinhalte mit industrieller Ästhetik und herbstlichem Farbschema, einschließlich Unterstützung des Dunkelmodus.

Offen