사용자 프로필 구성 요소

비즈니스 또는 기업 웹 사이트에 적합한 트라이어드 색 구성표를 사용한 마이크로 상호 작용을 특징으로 하는 간단하고 반응이 빠른 사용자 프로필 구성 요소입니다.

미리 보기

HTML 코드

<div class="max-w-sm mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
    <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/seed/profile/400/200" alt="Profile Background">
    <div class="flex items-center mt-4">
        <img class="w-16 h-16 rounded-full border-4 border-blue-500 dark:border-yellow-500" src="https://randomuser.me/api/portraits/men/70.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-bold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
        </div>
    </div>
    <p class="mt-2 text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="mt-4 flex justify-between">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-yellow-500 dark:hover:bg-yellow-600 dark:focus:ring-yellow-400 transition-colors">View Profile</button>
        <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg dark:bg-gray-700 dark:text-white hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">Message</button>
    </div>
</div>

사용자 프로필 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Neumorphic User Profiles 컴포넌트

사용자 프로필 구성 요소

사용자 프로필 구성 요소 - Luxury Sepia