Komponente "Benutzerprofile"
Eine einfache, reaktionsschnelle Benutzerprofilkomponente für den E-Commerce mit Mikrointeraktionen, ergänzendem Farbschema, Unterstützung des Dunkelmodus und ohne JavaScript.
HTML-Code
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="sm:flex sm:items-center px-6 py-4">
<img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
<div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
<p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
<p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
<button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Benutzerprofile"
Eine einfache, reaktionsschnelle Benutzerprofilkomponente mit einem Aquarell-/Kunststil und einem Regenbogen-Farbschema mit Farbverlauf, geeignet für Marktplatzplattformen. Beinhaltet Unterstützung für den Dunkelmodus.
Komponente "Benutzerprofile"
Eine Benutzerprofil-Komponente, die in einem brutalistischen Stil mit einem triadischen Farbschema gestaltet ist, eine moderate Komplexität aufweist, die für den Konsum von Blogs/Inhalten geeignet ist, und ein responsives Design mit Unterstützung für dunkle Themen.
Komponente "Benutzerprofile"
Eine reaktionsschnelle Benutzerprofilkomponente für ein Dashboard mit einem Pastelldesign im Dunkelmodus, das mit Tailwind CSS erstellt wurde. Es zeigt Benutzer-Avatare, Namen, Rollen und eine kurze Beschreibung mit einer Schaltfläche "Folgen" an. Das Design passt sich an verschiedene Bildschirmgrößen an und unterstützt den Dunkelmodus basierend auf der Systempräferenz.