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"

Ein einfacher, reaktionsschneller Abschnitt für soziale Komponenten für ein Dashboard mit einem monochromatischen Farbschema und einem vom Skeuomorphismus inspirierten Design.

Offen

Komponente "Soziale Komponenten"

Eine einfache Social-Media-Komponente, die mit Skeuomorphismus und einem monochromatischen Farbschema für Blog-Inhalte entwickelt wurde. Es verfügt über ein responsives Layout und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Skeuomorphismus Soziale Komponente

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

Offen