사용자 프로필 구성 요소 - 다크 포레스트 테마
부동산 플랫폼용으로 설계된 간단하고 반응이 빠른 사용자 프로필 구성 요소로, 짙은 포레스트 그린 색 구성표와 완전한 다크 모드 지원을 특징으로 합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden max-w-sm sm:max-w-md md:max-w-lg w-full transform transition duration-500 hover:scale-105">
<div class="relative h-32 sm:h-48 md:h-56 bg-gradient-to-br from-green-700 to-green-900 dark:from-green-800 dark:to-green-950">
<img class="absolute inset-0 w-full h-full object-cover opacity-30" src="https://picsum.photos/600/350?random=1" alt="Background foliage">
<div class="absolute inset-0 flex items-center justify-center">
<img class="w-24 h-24 sm:w-28 sm:h-28 md:w-32 md:h-32 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover transform translate-y-8 sm:translate-y-12 md:translate-y-16" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile picture">
</div>
</div>
<div class="pt-12 pb-6 px-6 sm:pt-16 sm:pb-8 sm:px-8 text-center">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
<p class="text-md sm:text-lg text-green-700 dark:text-green-400 font-semibold mb-4">Real Estate Agent</p>
<p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
Dedicated real estate professional specializing in sustainable properties and luxury homes in the Green Valley area. Passionate about helping clients find their perfect home.
</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-1">
View Listings
</a>
<a href="#" class="bg-transparent border border-green-600 dark:border-green-500 text-green-600 dark:text-green-500 hover:bg-green-50 dark:hover:bg-gray-700 font-semibold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">
Contact
</a>
</div>
<div class="grid grid-cols-2 gap-4 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
<div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
<span class="font-medium text-gray-900 dark:text-white mr-1">150+</span> Properties Sold
</div>
<div class="flex items-center justify-center p-2 rounded-md bg-gray-50 dark:bg-gray-700">
<span class="font-medium text-gray-900 dark:text-white mr-1">12</span> Years Exp.
</div>
</div>
</div>
</div>
</div>
관련 구성 요소
사용자 프로필 구성 요소
뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 사용자 프로필 구성 요소로, 바우하우스에서 영감을 받은 디자인과 밝은 캔디/달콤한 색 구성표 및 다크 모드 지원이 특징입니다. 풍부한 인터페이스를 위해 설계된 프로필 사진, 이름, 직함 및 팔로워 수와 함께 여러 사용자 프로필을 표시합니다.
사용자 프로필 구성 요소
여행/관광 웹사이트용으로 설계된 단순하고 예술적인 사용자 프로필 구성 요소로, 부드러운 수채화 텍스처, 무지개 그라데이션 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.