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 reaktionsschnelle Social-Media-Komponente, die mit dem Neumorphism-Stil und der Unterstützung dunkler Themen entwickelt wurde, mit einem einfachen Layout und minimalen Elementen.

Offen

Soziale Komponenten

Ein Bereich für soziale Komponenten, der im skeuomorphen Stil gestaltet ist, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Komponente "Soziale Komponenten"

Eine einfache soziale Komponente, die in einem skeuomorphen Stil mit leuchtenden Farben für eine professionelle Unternehmenswebsite und einem responsiven Design mit Unterstützung für den Dunkelmodus entwickelt wurde.

Offen