FiltersComponentNeumorphism
Eine einfache Komponente für responsive Filter, die mit der Soft-UI von Neumorphism gestaltet ist und ein Graustufen-Farbschema verwendet, das für Geschäfts-/Unternehmenswebsites entwickelt wurde. Die Komponente unterstützt den Dunkelmodus und wird mit Tailwind CSS ohne JavaScript erstellt.
HTML-Code
<!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
aria-label="Filter section"
class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
<!-- Search Input -->
<div class="flex-1">
<label for="filter-search" class="sr-only">Search</label>
<input
type="text"
id="filter-search"
placeholder="Search..."
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
/>
</div>
<!-- Category Select -->
<div class="flex-1">
<label for="filter-category" class="sr-only">Category</label>
<select
id="filter-category"
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
<option>All Categories</option>
<option>Marketing</option>
<option>Finance</option>
<option>HR</option>
</select>
</div>
<!-- Status Select -->
<div class="flex-1">
<label for="filter-status" class="sr-only">Status</label>
<select
id="filter-status"
class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
<option>All Status</option>
<option>Active</option>
<option>Inactive</option>
</select>
</div>
<!-- Apply Button -->
<div>
<button
type="button"
class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
>
Apply Filters
</button>
</div>
</section>
Verwandte Komponenten
Komponente "Forenfilter"
Eine reaktionsschnelle Forenfilterkomponente mit 3D-Designästhetik, Herbstfarbschema und Unterstützung für den Dunkelmodus, die für Community-Plattformen geeignet ist.
Komponente "Filter"
Eine brutalistische Filterkomponente mit Tailwind CSS mit responsivem Design, Unterstützung für dunkle Themen und Platzhaltern für Bilder und Avatare.
Komponente "Filter"
Eine reaktionsschnelle Filterkomponente für den E-Commerce, die ein Dark-Mode-Styling mit einem Farbschema in Erdtönen umfasst.