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.
HTML-Code
<div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
<p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-4">
<button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
<button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
<button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
</div>
</div>Verwandte Komponenten
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.
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.
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.