Komponente "Filter"
Eine komplexe, reaktionsschnelle Filterkomponente im Glassmorphism-Stil mit einem analogen Farbschema für Geschäfts-/Unternehmenswebsites. Verfügt über durchscheinende Elemente und Unschärfeeffekte mit vollständiger Unterstützung des Dunkelmodus mit Tailwind CSS. Es ist kein JavaScript enthalten.
HTML-Code
<div class="2xl:container 2xl:mx-auto">
<div class="py-12 px-4">
<div class="lg:flex justify-between">
<div class="lg:w-4/12">
<h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Filter by Category</h1>
<p class="text-base text-gray-600 dark:text-gray-300 mt-4">Explore a wide range of products tailored to your needs. From electronics to fashion, find exactly what you are looking for.</p>
<div class="w-full bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 flex items-center justify-between mt-8">
<input type="text" class="w-full bg-transparent text-base focus:outline-none placeholder-gray-600 text-gray-600 dark:text-gray-300 dark:placeholder-gray-300 py-4 px-4" placeholder="Search by name" />
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<circle cx="10" cy="10" r="7"></circle>
<line x1="21" y1="21" x2="15" y2="15"></line>
</svg>
</div>
<div class="mt-10">
<div class="flex flex-col space-y-4">
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">All Categories</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Electronics</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Fashion</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Home & Kitchen</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">Books</span>
</label>
</div>
</div>
<p class="text-base text-gray-600 dark:text-gray-300 mt-8">Price Range</p>
<div class="flex items-center justify-between mt-4">
<input type="number" placeholder="Min" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
<input type="number" placeholder="Max" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
</div>
<p class="text-base text-gray-600 dark:text-gray-300 mt-8">Customer Reviews</p>
<div class="flex flex-col space-y-4 mt-4">
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">5 Stars</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">4 Stars & Up</span>
</label>
<label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
<input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
<span class="ml-2">3 Stars & Up</span>
</label>
</div>
<button class="w-full bg-indigo-600 dark:bg-indigo-700 text-white text-base font-semibold py-4 px-4 rounded mt-8">Apply Filters</button>
<button class="w-full bg-transparent border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white text-base font-semibold py-4 px-4 rounded mt-4">Clear All</button>
</div>
<div class="lg:w-8/12 lg:ml-12 lg:mr-0 lg:mt-0 mt-6">
<div class="flex items-center justify-between">
<p class="text-base text-gray-600 dark:text-gray-300">Showing 1-12 of 200 products</p>
<div class="flex items-center space-x-2">
<select class="w-40 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none">
<option value="popularity">Sort by Popularity</option>
<option value="price_asc">Price: Low to High</option>
<option value="price_desc">Price: High to Low</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-8">
<!-- Product Card 1 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=1" alt="Product Image" />
<div class="absolute bottom-0 left-0 bg-indigo-600 dark:bg-indigo-700 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
New
</div>
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$32.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=2" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$45.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=3" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$28.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=4" alt="Product Image" />
<div class="absolute bottom-0 left-0 bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
Sale
</div>
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$50.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 5 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=5" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$65.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 6 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=6" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$19.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 7 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=7" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$99.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 8 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=8" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$75.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 9 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=9" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$88.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 10 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=10" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$120.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 11 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=11" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$25.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 12 -->
<div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
<div class="absolute top-0 right-0 p-2">
<svg class="w-6 h-6 text-gray-800 dark:text-white" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="relative">
<img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=12" alt="Product Image" />
</div>
<div class="px-4 mt-4 w-full">
<p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
<p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
<div class="flex items-center justify-between mt-4">
<p class="text-xl font-semibold text-gray-800 dark:text-white">$30.00</p>
<button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="flex justify-center mt-8">
<nav aria-label="Pagination">
<ul class="flex">
<li>
<a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-600 bg-indigo-100 border border-indigo-300 hover:bg-indigo-200 hover:text-indigo-800 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 dark:hover:text-white">1</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>Verwandte Komponenten
Komponente "Filter"
Eine reaktionsschnelle Filterkomponente mit Mikrointeraktionen, ansprechenden Animationen und Unterstützung für dunkle Themen mithilfe von Tailwind CSS.
Komponente "Filter"
Eine reaktionsschnelle Filterkomponente für den E-Commerce, die ein Dark-Mode-Styling mit einem Farbschema in Erdtönen umfasst.
Komponente "Filter"
Eine reaktionsschnelle Filterkomponente, die für die Benutzeroberfläche im Dunkelmodus mit Tailwind CSS entwickelt wurde. Es enthält Optionen zum Filtern von Inhalten, verwendet dunkle Hintergründe und spart Akkulaufzeit.