Filters 组件
一个复杂的、响应式的、Glassmorphism 风格的过滤器组件，具有用于商业/公司网站的类似配色方案。具有半透明元素和模糊效果，并使用 Tailwind CSS 提供完整的暗模式支持。不包含 JavaScript。
HTML 代码
<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>