Komponente "Forenfilter"
Eine reaktionsschnelle Forenfilterkomponente mit 3D-Designästhetik, Herbstfarbschema und Unterstützung für den Dunkelmodus, die für Community-Plattformen geeignet ist.
HTML-Code
<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>Verwandte Komponenten
Komponente "Filter"
Eine komplexe und reaktionsschnelle Filterkomponente mit 3D-Designelementen und einem triadischen Farbschema, geeignet für Blog-/Content-Websites. Unterstützt dunkles Design.
Komponente "Filter"
Eine reaktionsschnelle Filterkomponente, die mit Mikrointeraktionen entwickelt wurde und für die Unterstützung dunkler Themen optimiert ist.
Komponente "Filter"
Eine ausgeklügelte Filterkomponente, die mit Glassmorphism und einem analogen Farbschema entwickelt wurde und sich für die Visualisierung von Dashboard-Daten mit Unterstützung für dunkle Themen eignet.