Art Deco Grayscale User Profiles 구성 요소
아르데코 기하학적 그레이스케일 디자인의 반응형 사용자 프로필 구성 요소로, 다크 모드 지원을 포함하여 구인 게시판 또는 경력 플랫폼에 적합합니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8 flex items-center justify-center">
<div class="w-full max-w-6xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- User Profile Card 1 -->
<div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
<!-- Art Deco Border Element -->
<div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
<div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
<div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>
<div class="relative p-6 pt-12 text-center z-20">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile of Jane Doe" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Jane Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Senior Software Engineer</p>
<div class="mb-6 text-left">
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
San Francisco, CA
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
Full-time
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
5+ Years Experience
</div>
</div>
<div class="flex flex-wrap justify-center mb-6">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">React</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Node.js</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">AWS</span>
</div>
<a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
</div>
</div>
<!-- User Profile Card 2 -->
<div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
<div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
<div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
<div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>
<div class="relative p-6 pt-12 text-center z-20">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile of John Smith" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">John Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Product Manager</p>
<div class="mb-6 text-left">
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
New York, NY
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
Full-time
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
8+ Years Experience
</div>
</div>
<div class="flex flex-wrap justify-center mb-6">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Agile</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Roadmapping</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Market Analysis</span>
</div>
<a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
</div>
</div>
<!-- User Profile Card 3 -->
<div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
<div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
<div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
<div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>
<div class="relative p-6 pt-12 text-center z-20">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile of Sarah Lee" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">Sarah Lee</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">UX Designer</p>
<div class="mb-6 text-left">
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
Austin, TX
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
Contract
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
6+ Years Experience
</div>
</div>
<div class="flex flex-wrap justify-center mb-6">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Figma</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">User Research</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">Prototyping</span>
</div>
<a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
</div>
</div>
<!-- User Profile Card 4 -->
<div class="bg-white dark:bg-gray-800 shadow-lg dark:shadow-xl border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-2xl-dark relative">
<div class="absolute inset-0 border-[3px] border-gray-400 dark:border-gray-600 rounded-lg pointer-events-none z-10"></div>
<div class="absolute top-0 left-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[-3deg] origin-top-left"></div>
<div class="absolute bottom-0 right-0 w-full h-[50px] bg-gray-200 dark:bg-gray-700 pointer-events-none z-0 transform skew-y-[3deg] origin-bottom-right"></div>
<div class="relative p-6 pt-12 text-center z-20">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full overflow-hidden border-4 border-gray-400 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="Profile of David Chen" class="w-full h-full object-cover">
</div>
<h3 class="text-xl font-bold tracking-wider uppercase text-gray-800 dark:text-gray-100 mb-1">David Chen</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Data Scientist</p>
<div class="mb-6 text-left">
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
Seattle, WA
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300 mb-2">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path></svg>
Full-time
</div>
<div class="flex items-center text-gray-700 dark:text-gray-300">
<svg class="w-4 h-4 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
4+ Years Experience
</div>
</div>
<div class="flex flex-wrap justify-center mb-6">
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Python</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mr-2 mb-2">Machine Learning</span>
<span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-3 py-1 rounded-full mb-2">SQL</span>
</div>
<a href="#" class="inline-block bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-bold py-2 px-6 rounded-full uppercase text-sm tracking-wider transform transition-transform duration-200 hover:scale-105 hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">View Profile</a>
</div>
</div>
</div>
</div>관련 구성 요소
사용자 프로필 구성 요소
비즈니스 또는 기업 웹 사이트에 적합한 트라이어드 색 구성표를 사용한 마이크로 상호 작용을 특징으로 하는 간단하고 반응이 빠른 사용자 프로필 구성 요소입니다.
사용자 프로필 구성 요소
3D 디자인, 미적 감각 및 흙색 구성표를 갖춘 반응형 사용자 프로필 구성 요소로, 여행 및 관광 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.