CCHub Logo CCHub Tailwind Collection
Komponenten Benutzerprofile Komponente "Benutzerprofile"

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.

Vorschau

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

Benutzerprofil Einfache Karte

Responsive Benutzerprofilkarte mit Tailwind CSS, Material Design, Erdtöne Farbschema. Dunkler Modus unterstützt, kein JS erforderlich.

Offen

Komponente "Benutzerprofile"

Eine Benutzerprofilkomponente für Landwirtschafts-Websites mit einem Industriedesign-Stil mit gedämpften Farben, Benutzer-Avataren, Rollen und Standortinformationen. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Komponente "Benutzerprofile"

Eine einfache, reaktionsschnelle Benutzerprofilkomponente für den E-Commerce mit Mikrointeraktionen, ergänzendem Farbschema, Unterstützung des Dunkelmodus und ohne JavaScript.

Offen