CCHub Logo CCHub Tailwind Collection
Komponenten Benutzerprofile Komponente "Benutzerprofile"

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.

Vorschau

HTML-Code 

<div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Profile 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-gray-700 dark:text-gray-200">Content Writer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
            </p>
            <img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 2 -->
        <div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
            <p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
            </p>
            <img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 3 -->
        <div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
            <p class="text-gray-700 dark:text-gray-200">Web Developer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
            </p>
            <img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Benutzerprofile"

Eine reaktionsschnelle Benutzerprofilkomponente mit Neumorphism-Design und Unterstützung für den Dunkelmodus.

Offen

Komponente "Benutzerprofile"

Eine reaktionsschnelle Benutzerprofilkomponente mit Mikrointeraktionen, Graustufen-Farbschema, komplexem Layout, Unterstützung des Dunkelmodus und zufälligen Bildern/Avataren.

Offen

Komponente "Benutzerprofile"

Eine Benutzerprofilkomponente, die für ein Dashboard im Dunkelmodus mit pastellfarbenem Farbschema und Funktionen mittlerer Komplexität entwickelt wurde.

Offen