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

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.

Vorschau

HTML-Code 

<div class="max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Follow us on our platforms!</p>
        <div class="flex mt-4 space-x-4">
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
                <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-blue-400 rounded-full hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-500">
                <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="w-5 h-5">
            </a>
            <a href="#" class="flex items-center justify-center w-10 h-10 bg-red-500 rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600">
                <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="w-5 h-5">
            </a>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Soziale Komponenten"

Eine einfache, reaktionsschnelle Social-Media-Karte mit 3D-Designelementen, Erdtönen und Unterstützung für den Dunkelmodus.

Offen

Komponente "Soziale Komponenten"

Ein komplexer Bereich für soziale Komponenten, der für Unternehmenswebsites entwickelt wurde, unter Verwendung von Material Design-Prinzipien und einem Graustufen-Farbschema. Es bietet responsives Design und Unterstützung für dunkle Themen.

Offen

Komponente "Soziale Komponenten"

Eine auf Mikrointeraktionen ausgerichtete soziale Komponente für Blogs mit ansprechenden Animationen und einem monochromen Farbschema.

Offen