사용자 프로필 구성 요소 - 다크 포레스트 테마
부동산 플랫폼용으로 설계된 간단하고 반응이 빠른 사용자 프로필 구성 요소로, 짙은 포레스트 그린 색 구성표와 완전한 다크 모드 지원을 특징으로 합니다.
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>
관련 구성 요소
사용자 프로필 구성 요소
Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 사용자 프로필 구성 요소로, 단색 색 구성표를 특징으로 하며 소셜 네트워킹을 위한 인터페이스를 제공합니다. 다크 모드를 지원하며 반응형입니다.
사용자 프로필 구성 요소
여행/관광 웹사이트용으로 설계된 단순하고 예술적인 사용자 프로필 구성 요소로, 부드러운 수채화 텍스처, 무지개 그라데이션 색 구성표, 응답성 및 다크 모드 지원을 특징으로 합니다.
사용자 프로필 구성 요소
마이크로 인터랙션, 그레이스케일 색 구성표, 복잡한 레이아웃, 다크 모드 지원 및 무작위 이미지/아바타를 포함하는 반응형 사용자 프로필 구성 요소입니다.