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 brutalistische soziale Komponente, die ein mutiges Design mit hohem Kontrast, reaktionsschnellen Effekten und Unterstützung für dunkle Themen mit Tailwind CSS präsentiert. Enthält Benutzer-Avatare, Social-Media-Links und Platzhalterbilder.

Offen

Komponente "Soziale Komponenten"

Soziale Komponenten Komponente mit einem skeuomorphen Design, komplementärem Farbschema und mäßiger Komplexität. Es wurde für Geschäfts-/Unternehmenswebsites entwickelt, ist reaktionsschnell und unterstützt dunkle Themen.

Offen

Soziale Komponenten

Eine Webkomponente mit einem Glassmorphism-Design mit mattglasähnlichen, durchscheinenden Elementen und Unschärfeeffekten, responsiven Effekten und Unterstützung für dunkle Themen.

Offen