Forum Filters 구성 요소
반응형 포럼 필터 구성 요소는 3D 디자인 미학, 가을 색 구성표 및 다크 모드를 지원하며 커뮤니티 플랫폼에 적합합니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-orange-100 to-amber-200 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
<!-- Component Container with 3D Card Effect -->
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl border-t border-r border-orange-200 dark:border-gray-600
transform perspective-1000 rotate-x-3 rotate-y-2 translate-z-10
transition-all duration-500 hover:rotate-x-0 hover:rotate-y-0 hover:translate-z-0
p-6 sm:p-8 lg:p-10 relative overflow-hidden">
<!-- Background Grain/Texture Overlay -->
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] pointer-events-none"></div>
<div class="relative z-10">
<h2 class="text-3xl sm:text-4xl font-extrabold text-brown-800 dark:text-orange-300 mb-6 sm:mb-8 text-center
drop-shadow-lg [text-shadow:_2px_2px_4px_rgb(0_0_0_/_0.2)] dark:[text-shadow:_2px_2px_4px_rgb(255_165_0_/_0.2)]">
Forum Discussions
</h2>
<!-- Search Bar -->
<div class="mb-6 sm:mb-8 relative">
<input type="text" placeholder="Search discussions..." class="w-full p-3 sm:p-4 pr-12 rounded-xl bg-orange-50 dark:bg-gray-600 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400
focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-500 focus:border-transparent
shadow-inner transition-all duration-300 transform translate-z-5 hover:scale-100.5">
<svg class="absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 text-orange-500 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<!-- Filter Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
<!-- Category Filter -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label for="category" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Category</label>
<select id="category" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
<option value="all">All Categories</option>
<option value="general">General Discussion</option>
<option value="announcements">Announcements</option>
<option value="support">Support</option>
<option value="feedback">Feedback</option>
<option value="suggestions">Suggestions</option>
</select>
</div>
<!-- Sort By Filter -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label for="sort-by" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Sort By</label>
<select id="sort-by" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
<option value="latest">Latest Activity</option>
<option value="popular">Most Popular</option>
<option value="newest">Newest Posts</option>
<option value="oldest">Oldest Posts</option>
</select>
</div>
<!-- Status Filter -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label for="status" class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Status</label>
<select id="status" class="w-full p-3 rounded-lg bg-white dark:bg-gray-700 border border-orange-200 dark:border-gray-500 text-gray-800 dark:text-gray-100
focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-orange-600 focus:border-transparent
shadow-sm appearance-none transition-all duration-200 transform translate-z-2">
<option value="all">All Statuses</option>
<option value="open">Open</option>
<option value="resolved">Resolved</option>
<option value="locked">Locked</option>
</select>
</div>
<!-- Tags Filter (Multi-select style) -->
<div class="bg-orange-100 dark:bg-gray-600 p-4 rounded-xl shadow-md border border-orange-200 dark:border-gray-500
transform translate-z-8 transition-all duration-300 hover:shadow-lg hover:transform hover:translate-z-10">
<label class="block text-lg font-semibold text-brown-700 dark:text-orange-200 mb-2
[text-shadow:_1px_1px_2px_rgb(0_0_0_/_0.1)]">Tags</label>
<div class="flex flex-wrap gap-2">
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">CSS</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">HTML</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">JavaScript</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">Tailwind</button>
<button class="px-4 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-brown-900 dark:text-orange-100 text-sm font-medium
hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200
shadow-sm hover:shadow-md transform translate-z-3 hover:translate-z-4">UI/UX</button>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-8 flex justify-end gap-4">
<button class="px-6 py-3 rounded-full bg-gradient-to-r from-red-600 to-red-800 dark:from-red-700 dark:to-red-900 text-white font-semibold shadow-lg
transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
<span class="relative z-10">Reset Filters</span>
<span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-red-700 dark:bg-red-800 transition-opacity duration-300"></span>
</button>
<button class="px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-700 dark:from-orange-600 dark:to-orange-800 text-white font-semibold shadow-lg
transform translate-z-10 hover:translate-z-12 hover:scale-105 transition-all duration-300
focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600">
<span class="relative z-10">Apply Filters</span>
<span class="absolute inset-0 rounded-full opacity-0 hover:opacity-100 bg-orange-600 dark:bg-orange-700 transition-opacity duration-300"></span>
</button>
</div>
</div>
</div>
<!-- Custom Styles for 3D Perspective -->
<style>
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-3 {
transform: rotateX(3deg);
}
.rotate-y-2 {
transform: rotateY(2deg);
}
.translate-z-10 {
transform: translateZ(10px);
}
.translate-z-8 {
transform: translateZ(8px);
}
.translate-z-5 {
transform: translateZ(5px);
}
.translate-z-4 {
transform: translateZ(4px);
}
.translate-z-3 {
transform: translateZ(3px);
}
.translate-z-2 {
transform: translateZ(2px);
}
.translate-z-12 {
transform: translateZ(12px);
}
/* Ensure children maintain 3D context */
.perspective-1000 > * {
transform-style: preserve-3d;
}
.shadow-lg[class*="transform"]:hover, .shadow-md[class*="transform"]:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c; /* Ensure dark mode body background is set */
}
}
</style>
</div>관련 구성 요소
필터 구성 요소
Brutalism 스타일로 설계된 반응형 필터 구성 요소로, 대시보드 설정을 위한 회색조 색 구성표가 있습니다. 대화형 필터 옵션이 포함되어 있으며 어두운 테마를 지원합니다.
브루탈리스트필터컴포넌트
브루탈리즘 스타일의 필터 구성 요소로, 높은 대비, 대담한 타이포그래피, 특이한 간격이 있습니다. 여기에는 확인란, 라디오 버튼 및 가격대 슬라이더가 포함됩니다. 반응형 효과는 미디어 쿼리와 유체 단위를 통해 달성됩니다. 다크 모드는 CSS를 통해 지원됩니다.