필터 구성 요소

<div class="p-4 sm:p-8 bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-900 dark:to-green-950 min-h-screen font-sans text-gray-800 dark:text-gray-200 transition-colors duration-500">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden p-6 sm:p-10 border border-green-200 dark:border-green-700 transition-all duration-500">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-green-800 dark:from-emerald-400 dark:to-green-600 mb-8 sm:mb-10 text-center">
      Browse Our Portfolio
    </h2>

    <!-- Filter Controls Section -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 mb-10">

      <!-- Category Filter -->
      <div class="relative group">
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Category</label>
        <select id="category" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
          bg-no-repeat bg-right-center pr-10 cursor-pointer
          bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] ">
          <option value="all" class="text-gray-700 dark:text-gray-300">All Categories</option>
          <option value="web-design" class="text-gray-700 dark:text-gray-300">Web Design</option>
          <option value="branding" class="text-gray-700 dark:text-gray-300">Branding</option>
          <option value="marketing" class="text-gray-700 dark:text-gray-300">Marketing</option>
          <option value="photography" class="text-gray-700 dark:text-gray-300">Photography</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Sort By Filter -->
      <div class="relative group">
        <label for="sortby" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Sort By</label>
        <select id="sortby" class="block w-full px-4 py-3 border border-green-300 dark:border-green-700 rounded-xl shadow-sm focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-600 focus:border-emerald-500 dark:focus:border-green-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 appearance-none transition-all duration-300 ease-in-out
          bg-no-repeat bg-right-center pr-10 cursor-pointer
          bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] dark:bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"%3e%3cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"%3e%3c/path%3e%3c/svg%3e')] ">
          <option value="newest" class="text-gray-700 dark:text-gray-300">Newest</option>
          <option value="oldest" class="text-gray-700 dark:text-gray-300">Oldest</option>
          <option value="popular" class="text-gray-700 dark:text-gray-300">Most Popular</option>
        </select>
        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
          <svg class="h-5 w-5 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </div>
      </div>

      <!-- Search Input -->
      <div class="relative col-span-full md:col-span-1 lg:col-span-2