CCHub Logo CCHub Tailwind Collection
Komponenten Benutzerprofile Komponente "Benutzerprofile"

Komponente "Benutzerprofile"

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

Vorschau

HTML-Code 

<div class="bg-gray-900 text-gray-300 p-6 rounded-lg shadow-lg space-y-6">
    <h2 class="text-2xl font-bold text-center">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <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-xl font-semibold text-center">John Doe</h3>
            <p class="text-center">Software Developer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Jane Smith</h3>
            <p class="text-center">Product Manager</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- User Profile Card -->
        <div class="bg-gray-800 rounded-lg p-4 transition-transform transform hover:-translate-y-2">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-xl font-semibold text-center">Michael Johnson</h3>
            <p class="text-center">UX Designer</p>
            <div class="mt-4 flex justify-between">
                <button class="bg-pastel-blue-500 text-white py-2 px-4 rounded hover:bg-pastel-blue-700">View Profile</button>
                <button class="bg-red-600 text-white py-2 px-4 rounded hover:bg-red-700">Remove</button>
            </div>
        </div>
        <!-- Add more user profiles as needed -->
    </div>
</div>

Verwandte Komponenten

Neumorphe Benutzerprofilkarte - Pastell

Eine einfache, reaktionsschnelle Benutzerprofilkarte mit einem neumorphen Design in Pastelltönen, die für Portfolios geeignet sind, einschließlich Unterstützung des Dunkelmodus.

Offen

Komponente "Neumorphe Benutzerprofile"

Eine komplexe, reaktionsschnelle Benutzerprofilkomponente mit einem neumorphen Designstil und einem ozean/blauen Farbschema, geeignet für Geschäfts-/Unternehmenswebsites. Enthält Unterstützung für den Dunkelmodus.

Offen

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.

Offen