Komponente "Benutzerprofile"
Eine reaktionsschnelle Komponente für Benutzerprofile mit einem Glassmorphism-Designstil, mit Unterstützung für dunkle Designs und der Verwendung von Tailwind CSS.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> New York, USA</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> January 1, 1990</li>
</ul>
</div>
</div>
<div class="bg-white dark:bg-gray-800 bg-opacity-20 backdrop-blur-md rounded-lg shadow-lg p-6 md:w-1/3 w-full mt-6">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-24 h-24 border-4 border-white dark:border-gray-700 mb-4 shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Graphic Designer</p>
<ul class="mt-4 space-y-2 text-center">
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-envelope"></i> [email protected]</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-map-marker-alt"></i> London, UK</li>
<li class="text-gray-700 dark:text-gray-300"><i class="fas fa-birthday-cake"></i> March 5, 1992</li>
</ul>
</div>
</div>
</div>
<!-- Add Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">Verwandte Komponenten
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.
Komponente "Benutzerprofile"
Eine reaktionsschnelle Benutzerprofilkomponente mit Neumorphism-Design und Unterstützung für den Dunkelmodus.
Komponente "Benutzerprofile"
Glassmorphism User Profile Component mit monochromatischem Farbschema und einfacher Komplexität.