CCHub Logo CCHub Tailwind Collection
Komponenten Benutzerprofile Komponente "Benutzerprofile"

Komponente "Benutzerprofile"

Eine Benutzerprofil-Komponente, die im Brutalismus-Stil unter Verwendung von Tailwind CSS entworfen wurde, ein monochromatisches Farbschema aufweist und eine Schnittstelle für soziale Netzwerke bietet. Es unterstützt den Dunkelmodus und ist reaktionsschnell.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center bg-gray-900 p-6 rounded-lg shadow-lg dark:bg-gray-800">
    <h1 class="text-4xl text-white font-bold mb-4">User Profiles</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=1" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">John Doe</h2>
                <p class="text-gray-400 text-center mb-2">@johndoe</p>
                <p class="text-gray-300 text-center">Web Developer<br>Based in San Francisco</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=2" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Jane Smith</h2>
                <p class="text-gray-400 text-center mb-2">@janesmith</p>
                <p class="text-gray-300 text-center">Graphic Designer<br>Based in New York</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-600">
            <img src="https://picsum.photos/200/300?random=3" alt="User Image" class="w-full h-40 object-cover rounded-t-lg">
            <div class="p-4">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-16 h-16 rounded-full mx-auto mb-2">
                <h2 class="text-2xl text-white font-semibold text-center">Alex Johnson</h2>
                <p class="text-gray-400 text-center mb-2">@alexjohnson</p>
                <p class="text-gray-300 text-center">Content Creator<br>Based in Austin</p>
                <button class="mt-4 w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-500">Follow</button>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Komponente "Art Deco Graustufen-Benutzerprofile"

Eine reaktionsschnelle Komponente für Benutzerprofile mit einem geometrischen Graustufen-Design im Art-déco-Stil, geeignet für Jobbörsen oder Karriereplattformen, einschließlich Unterstützung des Dunkelmodus.

Offen

Komponente "Benutzerprofile"

Eine komplexe, reaktionsschnelle Benutzerprofilkomponente für Nachrichten-/Journalismus-Websites mit einem vom Bauhaus inspirierten Design mit einem hellen Bonbon-/Süßigkeiten-Farbschema und Unterstützung für den Dunkelmodus. Zeigt mehrere Benutzerprofile mit Profilbildern, Namen, Titeln und Follower-Zahlen an, die für eine reichhaltige Benutzeroberfläche entwickelt wurden.

Offen

Komponente "Benutzerprofile"

Komponente "Responsive User Profiles" mit Mikrointeraktionen, einem lebendigen Farbschema und einem einfachen Komplexitätsgrad für das Portfolio.

Offen