Memphis_Job_Filters

<div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-fuchsia-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-fuchsia-600 dark:border-cyan-500 relative">
    <!-- Memphis Design Elements -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-cyan-400 dark:bg-yellow-400 transform rotate-45 z-0 rounded-lg"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-yellow-400 dark:bg-fuchsia-600 transform -rotate-12 z-0 rounded-full opacity-75"></div>
    <div class="absolute top-1/4 left-1/3 w-16 h-16 border-4 border-fuchsia-600 dark:border-cyan-500 rounded-full opacity-50 z-0"></div>

    <div class="p-6 sm:p-8 md:p-10 relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-fuchsia-700 dark:text-cyan-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
        Find Your Dream Job
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
        <!-- Keyword Search -->
        <div class="relative">
          <label for="search-keyword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keyword</label>
          <input type="text" id="search-keyword" placeholder="e.g., Frontend Developer" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
        </div>

        <!-- Location Filter -->
        <div class="relative">
          <label for="search-location" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
          <select id="search-location" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Locations</option>
            <option value="remote">Remote</option>
            <option value="new_york">New York, NY</option>
            <option value="san_francisco">San Francisco, CA</option>
            <option value="london">London, UK</option>
            <option value="berlin">Berlin, DE</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Job Type Filter -->
        <div class="relative">
          <label for="job-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Job Type</label>
          <select id="job-type" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Types</option>
            <option value="full-time">Full-time</option>
            <option value="part-time">Part-time</option>
            <option value="contract">Contract</option>
            <option value="internship">Internship</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Salary Range Filter -->
        <div class="relative">
          <label for="salary-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Salary Range</label>
          <select id="salary-range" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">Any Salary</option>
            <option value="0-50000">$0 - $50,000</option>
            <option value="50000-80000">$50,000 - $80,000</option>
            <option value="80000-120000">$80,000 - $120,000</option>
            <option value="120000-plus">$120,000+</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-fuchsia-700 dark:text-cyan-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Experience Level Filter -->
        <div class="relative">
          <label for="experience-level" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Experience Level</label>
          <select id="experience-level" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">Any Level</option>
            <option value="entry">Entry Level</option>
            <option value="mid">Mid-Senior Level</option>
            <option value="senior">Director / Executive</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Industry Filter -->
        <div class="relative">
          <label for="industry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Industry</label>
          <select id="industry" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Industries</option>
            <option value="tech">Technology</option>
            <option value="healthcare">Healthcare</option>
            <option value="finance">Finance</option>
            <option value="education">Education</option>
            <option value="marketing">Marketing</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 border-2 border-fuchsia-800 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:border-cyan-700">
          Apply Filters
        </button>
        <button class="px-8 py-3 rounded-full bg-transparent border-2 border-cyan-500 text-cyan-700 hover:bg-cyan-50 dark:border-yellow-500 dark:text-yellow-400 dark:hover:bg-gray-700 font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95">
          Clear All
        </button>
      </div>

      <!-- Trending Jobs Section - Example Placeholder -->
      <div class="mt-12 pt-8 border-t-2 border-dashed border-fuchsia-300 dark:border-cyan-700">
        <h3 class="text-xl sm:text-2xl font-bold text-fuchsia-700 dark:text-cyan-400 mb-6 text-center">Trending Categories</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          <div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Software Engineering
          </div>
          <div class="p-4 rounded-lg bg-yellow-100 dark:bg-gray-700 border-2 border-yellow-400 dark:border-fuchsia-600 text-center font-medium text-yellow-800 dark:text-fuchsia-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            UI/UX Design
          </div>
          <div class="p-4 rounded-lg bg-fuchsia-100 dark:bg-gray-700 border-2 border-fuchsia-400 dark:border-cyan-600 text-center font-medium text-fuchsia-800 dark:text-cyan-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Data Science
          </div>
          <div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Product Management
          </div>
        </div>
      </div>

    </div>
  </div>
</div>