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

Komponente "Soziale Komponenten"

Eine einfache Social-Media-Komponente, die Tailwind CSS verwendet und nach den Prinzipien des Material Designs entwickelt wurde. Es verfügt über lebendige Farben und Unterstützung für den Dunkelmodus, wodurch es für Schnittstellen in sozialen Netzwerken geeignet ist.

Vorschau

HTML-Code 

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
    <div class="p-4">
        <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
        <div class="mt-4 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Soziale Komponenten"

Eine Portfoliokomponente, die im Dunkelmodus mit einem monochromatischen Farbschema entworfen wurde. Es präsentiert Arbeiten oder Produkte mit einem einfachen Layout.

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

Komponente "Soziale Komponenten"

Eine soziale Komponente für ein Armaturenbrett mit brutalistischem und pastellfarbenem Design. Es zeigt ein Benutzerprofil mit einem Namen, einem Titel und einem Avatar an und enthält Schaltflächen für soziale Aktionen wie Folgen, Messaging und Teilen. Die Komponente reagiert und unterstützt den Dunkelmodus.

Offen