뉴모픽 이벤트 필터
이벤트 및 컨퍼런스 웹 사이트에 따뜻한 일몰 톤을 사용하는 간단하고 반응이 빠른 뉴모픽 필터 구성 요소로, 다크 모드를 지원합니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-orange-100 to-yellow-100 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm mx-auto p-6 rounded-3xl bg-transparent
shadow-xl shadow-orange-300/50 dark:shadow-gray-950
dark:bg-gradient-to-br dark:from-gray-850 dark:to-gray-900
text-orange-900 dark:text-gray-200
">
<h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-center
text-orange-800 dark:text-orange-400
[text-shadow:_0_1px_0_rgb(255_255_255_/_40%)] dark:[text-shadow:_none]
">
Filter Events
</h2>
<div class="space-y-6">
<!-- Category Filter -->
<div>
<label for="category" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
Category
</label>
<div class="relative">
<select id="category" class="block w-full px-4 py-2 rounded-xl appearance-none
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
">
<option value="">All Categories</option>
<option value="tech">Technology</option>
<option value="design">Design & UX</option>
<option value="marketing">Marketing</option>
<option value="business">Business & Entrepreneurship</option>
<option value="health">Health & Wellness</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3
text-orange-600 dark:text-gray-400
">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<!-- Date Range Filter -->
<div>
<label for="date-start" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
Date Range
</label>
<div class="flex space-x-4">
<input type="date" id="date-start" class="w-full px-4 py-2 rounded-xl
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
placeholder-orange-400 dark:placeholder-gray-500
">
<input type="date" id="date-end" class="w-full px-4 py-2 rounded-xl
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
placeholder-orange-400 dark:placeholder-gray-500
">
</div>
</div>
<!-- Location Filter -->
<div>
<label for="location" class="block text-sm font-medium mb-2 opacity-80 dark:opacity-90">
Location
</label>
<input type="text" id="location" placeholder="e.g., Virtual, New York, London"
class="w-full px-4 py-2 rounded-xl
bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-700 dark:to-gray-800
shadow-md shadow-orange-200/50 dark:shadow-gray-950
border border-orange-100 dark:border-gray-700
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-inset
text-orange-900 dark:text-gray-100
placeholder-orange-400 dark:placeholder-gray-500
">
</div>
<!-- Filter Button -->
<button type="button" class="w-full py-3 rounded-full font-semibold relative overflow-hidden
bg-gradient-to-r from-orange-500 to-red-500 text-white
shadow-lg shadow-orange-400/50 dark:shadow-red-700/50
transition-all duration-300 ease-out
hover:scale-105 hover:shadow-xl
active:scale-95 active:shadow-md
dark:from-orange-600 dark:to-red-600
group
">
<span class="relative z-10">
Apply Filters
</span>
<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
</button>
<!-- Reset Button -->
<button type="button" class="w-full py-2 rounded-full font-medium
text-orange-700 dark:text-orange-300
bg-transparent
shadow-none
transition duration-300 ease-in-out
hover:text-orange-900 hover:dark:text-orange-100
hover:underline
focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500
neumorphic-button-flat
">
Reset Filters
</button>
</div>
</div>
</div>
<style>
/* Base Neumorphic Inset */
.neumorphic-inset {
box-shadow:
inset 4px 4px 8px rgba(255, 160, 0, 0.2), /* Light shadow for orange */
inset -4px -4px 8px rgba(255, 255, 255, 0.7); /* Dark shadow for white */
transition: all 0.2s ease-in-out;
}
.dark .neumorphic-inset {
box-shadow:
inset 4px 4px 8px rgba(0, 0, 0, 0.6),
inset -4px -4px 8px rgba(70, 70, 70, 0.3);
}
/* Focus state for neumorphic inset elements */
.neumorphic-inset:focus {
box-shadow:
inset 2px 2px 5px rgba(255, 160, 0, 0.3),
inset -2px -2px 5px rgba(255, 255, 255, 0.5),
0 0 0 2px var(--tw-ring-color); /* Tailwind ring */
}
.dark .neumorphic-inset:focus {
box-shadow:
inset 2px 2px 5px rgba(0, 0, 0, 0.7),
inset -2px -2px 5px rgba(70, 70, 70, 0.4),
0 0 0 2px var(--tw-ring-color); /* Tailwind ring */
}
/* Custom styling for select dropdown arrow */
select.neumorphic-inset {
background-image: none; /* Remove default arrow */
}
select ~ div.pointer-events-none svg {
fill: currentColor; /* Use text color for arrow */
}
.neumorphic-button-flat {
/* Reset button should look flatter, almost like text, but maintain neumorphic context */
background-color: transparent; /* No strong background */
box-shadow: none; /* No strong shadow */
}
.neumorphic-button-flat:hover {
/* Subtle glow or shift on hover if desired, or just underline */
/* Example: text-shadow: 0 0 5px rgba(255, 160, 0, 0.5); */
}
</style>관련 구성 요소
필터컴포넌트
어두운 테마를 지원하는 전자 상거래 애플리케이션을 위해 Material Design 스타일로 설계된 반응형 필터 구성 요소입니다. 향상된 쇼핑 경험을 위한 여러 대화형 요소가 포함되어 있습니다.
필터 구성 요소
Brutalism 스타일로 설계된 반응형 필터 구성 요소로, 대시보드 설정을 위한 회색조 색 구성표가 있습니다. 대화형 필터 옵션이 포함되어 있으며 어두운 테마를 지원합니다.
Luxury_Retro_Gaming_Filters
럭셔리한 복고풍 미학을 가진 게임 웹사이트를 위한 간단하고 우아하며 반응이 빠른 필터 구성 요소입니다. 차분한 빈티지 색상, 세련된 타이포그래피, 다크 모드 지원이 특징입니다.