CCHub Logo CCHub Tailwind Collection
구성 요소 사용자 프로필 사용자 프로필 구성 요소

사용자 프로필 구성 요소

사용자 프로필 구성 요소는 파스텔 색 구성표와 중간 정도의 복잡성 기능이 있는 다크 모드 대시보드용으로 설계되었습니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

사용자 프로필 구성 요소

암호화폐/블록체인 애플리케이션을 위해 설계된 반응형의 전문적인 사용자 프로필 구성 요소로, 보색 구성표와 다크 모드 지원과 함께 깨끗하고 신뢰할 수 있는 디자인을 특징으로 합니다.

열다

사용자 프로필 구성 요소

여행/관광 웹사이트용으로 설계된 단순하고 예술적인 사용자 프로필 구성 요소로, 부드러운 수채화 텍스처, 무지개 그라데이션 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다

사용자 프로필 구성 요소

뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 사용자 프로필 구성 요소로, 바우하우스에서 영감을 받은 디자인과 밝은 캔디/달콤한 색 구성표 및 다크 모드 지원이 특징입니다. 풍부한 인터페이스를 위해 설계된 프로필 사진, 이름, 직함 및 팔로워 수와 함께 여러 사용자 프로필을 표시합니다.

열다