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