Memphis_Job_Filters
장난기 넘치는 멤피스 디자인 스타일, 트라이어딕 색 구성표 및 다크 모드 지원을 갖춘 반응형 작업 필터 구성 요소로 구인 게시판 및 경력 플랫폼에 적합합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-fuchsia-100 dark:bg-gray-900 font-sans">
<div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-fuchsia-600 dark:border-cyan-500 relative">
<!-- Memphis Design Elements -->
<div class="absolute -top-6 -left-6 w-24 h-24 bg-cyan-400 dark:bg-yellow-400 transform rotate-45 z-0 rounded-lg"></div>
<div class="absolute -bottom-6 -right-6 w-32 h-32 bg-yellow-400 dark:bg-fuchsia-600 transform -rotate-12 z-0 rounded-full opacity-75"></div>
<div class="absolute top-1/4 left-1/3 w-16 h-16 border-4 border-fuchsia-600 dark:border-cyan-500 rounded-full opacity-50 z-0"></div>
<div class="p-6 sm:p-8 md:p-10 relative z-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-fuchsia-700 dark:text-cyan-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
Find Your Dream Job
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Keyword Search -->
<div class="relative">
<label for="search-keyword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keyword</label>
<input type="text" id="search-keyword" placeholder="e.g., Frontend Developer" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
</div>
<!-- Location Filter -->
<div class="relative">
<label for="search-location" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
<select id="search-location" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
<option value="">All Locations</option>
<option value="remote">Remote</option>
<option value="new_york">New York, NY</option>
<option value="san_francisco">San Francisco, CA</option>
<option value="london">London, UK</option>
<option value="berlin">Berlin, DE</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
</div>
</div>
<!-- Job Type Filter -->
<div class="relative">
<label for="job-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Job Type</label>
<select id="job-type" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
<option value="">All Types</option>
<option value="full-time">Full-time</option>
<option value="part-time">Part-time</option>
<option value="contract">Contract</option>
<option value="internship">Internship</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
</div>
</div>
<!-- Salary Range Filter -->
<div class="relative">
<label for="salary-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Salary Range</label>
<select id="salary-range" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
<option value="">Any Salary</option>
<option value="0-50000">$0 - $50,000</option>
<option value="50000-80000">$50,000 - $80,000</option>
<option value="80000-120000">$80,000 - $120,000</option>
<option value="120000-plus">$120,000+</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-fuchsia-700 dark:text-cyan-400 top-7">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
</div>
</div>
<!-- Experience Level Filter -->
<div class="relative">
<label for="experience-level" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Experience Level</label>
<select id="experience-level" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
<option value="">Any Level</option>
<option value="entry">Entry Level</option>
<option value="mid">Mid-Senior Level</option>
<option value="senior">Director / Executive</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
</div>
</div>
<!-- Industry Filter -->
<div class="relative">
<label for="industry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Industry</label>
<select id="industry" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
<option value="">All Industries</option>
<option value="tech">Technology</option>
<option value="healthcare">Healthcare</option>
<option value="finance">Finance</option>
<option value="education">Education</option>
<option value="marketing">Marketing</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
<button class="px-8 py-3 rounded-full bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 border-2 border-fuchsia-800 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:border-cyan-700">
Apply Filters
</button>
<button class="px-8 py-3 rounded-full bg-transparent border-2 border-cyan-500 text-cyan-700 hover:bg-cyan-50 dark:border-yellow-500 dark:text-yellow-400 dark:hover:bg-gray-700 font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95">
Clear All
</button>
</div>
<!-- Trending Jobs Section - Example Placeholder -->
<div class="mt-12 pt-8 border-t-2 border-dashed border-fuchsia-300 dark:border-cyan-700">
<h3 class="text-xl sm:text-2xl font-bold text-fuchsia-700 dark:text-cyan-400 mb-6 text-center">Trending Categories</h3>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
Software Engineering
</div>
<div class="p-4 rounded-lg bg-yellow-100 dark:bg-gray-700 border-2 border-yellow-400 dark:border-fuchsia-600 text-center font-medium text-yellow-800 dark:text-fuchsia-300 transform hover:scale-105 transition duration-200 cursor-pointer">
UI/UX Design
</div>
<div class="p-4 rounded-lg bg-fuchsia-100 dark:bg-gray-700 border-2 border-fuchsia-400 dark:border-cyan-600 text-center font-medium text-fuchsia-800 dark:text-cyan-300 transform hover:scale-105 transition duration-200 cursor-pointer">
Data Science
</div>
<div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
Product Management
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Bauhaus_EarthTone_Agriculture_Filters_Component
농업/농업 웹사이트를 위한 복잡하고 반응이 빠른 필터 구성 요소로, 흙색의 Bauhaus 스타일로 설계되었습니다. 카테고리, 가격대, 등급 및 인기 태그와 같은 다양한 필터링 옵션이 포함되어 있으며 완전한 다크 모드를 지원합니다.
Luxury_Retro_Gaming_Filters
럭셔리한 복고풍 미학을 가진 게임 웹사이트를 위한 간단하고 우아하며 반응이 빠른 필터 구성 요소입니다. 차분한 빈티지 색상, 세련된 타이포그래피, 다크 모드 지원이 특징입니다.