Filter Bar

            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen text-gray-800">
  <div class="rounded bg-white w-full max-w-2xl p-6">
    <div class="flex">
      <div class="flex-1"><span class="text-gray-400">Filters:</span>
        <ul class="inline-flex">
          <li class="mx-1 px-2 py-1 text-sm rounded text-pink-800 bg-pink-100 hover:bg-pink-200 transition-colors cursor-pointer">Full-time</li>
          <li class="mx-1 px-2 py-1 text-sm rounded text-pink-800 bg-pink-100 hover:bg-pink-200 transition-colors cursor-pointer">Mid Level</li>
          <li class="mx-1 px-2 py-1 text-sm rounded text-pink-800 bg-pink-100 hover:bg-pink-200 transition-colors cursor-pointer">€70k - €85k</li>
        </ul>
      </div><button class="flex items-center ml-1 text-gray-600 hover:text-gray-800 transition-colors"><span>Refine</span> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="ml-2">
          <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zM3.5 5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zM5 8.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
        </svg></button>
    </div>
    <div class="mt-6 grid grid-cols-3 gap-2">
      <div>
        <h2 class="mb-2 font-bold text-gray-600">Type</h2>
        <ul>
          <li class="mb-1"><label><input type="checkbox" checked="checked"> <span class="select-none">Full-time</span></label></li>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">Part-time</span></label></li>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">Contract</span></label></li>
        </ul>
      </div>
      <div>
        <h2 class="mb-2 font-bold text-gray-600">Experience</h2>
        <ul>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">Entry Level</span></label></li>
          <li class="mb-1"><label><input type="checkbox" checked="checked"> <span class="select-none">Mid Level</span></label></li>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">Senior Level</span></label></li>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">Architect</span></label></li>
        </ul>
      </div>
      <div>
        <h2 class="mb-2 font-bold text-gray-600">Salary</h2>
        <ul>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">€45k - €60k</span></label></li>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">€60k - €70k</span></label></li>
          <li class="mb-1"><label><input type="checkbox" checked="checked"> <span class="select-none">€70k - €85k</span></label></li>
          <li class="mb-1"><label><input type="checkbox"> <span class="select-none">Above €85k</span></label></li>
        </ul>
      </div>
    </div>
  </div>
</div>