Komponenten Soziale Komponenten Soziale Komponenten

Soziale Komponenten

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

Vorschau

HTML-Code

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
    <div class="flex flex-row space-x-4">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
            <h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
            <p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
        </div>
    </div>
    <div class="mt-6 flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
        <h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
    </div>
</div>

Verwandte Komponenten

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

3D Social Author Karte

Eine reaktionsschnelle Autorenkartenkomponente mit 3D-Effekten und Social-Media-Links, die für Blog-/Content-Bereiche entwickelt wurde. Es verfügt über ein komplementäres Farbschema (Blau für Identität/Info, Orange für Akzente/CTA), unterstützt den Dunkelmodus und verwendet Tailwind CSS für das Styling. Das Design ist "einfach" komplex mit einem grundlegenden Layout und minimalen Elementen, dennoch ist "3D-Design" für Tiefe und Engagement mit Schatten und Hover-Effekten integriert. Die Komponente enthält einen Avatar, den Namen des Autors, eine kurze Biografie, Social-Media-Symbole und einen Call-to-Action-Button "Follow Me". Es verwendet einen randomuser.me Avatar als Platzhalter.

Offen

Skeuomorphismus Soziale Komponente

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

Offen