[ Component ]
List Filter

· filter· sort
Copy as
HTML
JSX
            <div class="flex justify-center items-center bg-gray-100 w-full min-h-screen">
  <div><button class="px-8 py-2 rounded-full bg-white border border-gray-300">Filter</button>
    <div class="my-2 px-6 py-4 rounded-md bg-white shadow-xl w-64">
      <div class="font-medium my-1">Display Options</div>
      <ul class="flex mb-4 mt-2">
        <li class="p-3 mr-1 rounded-full text-white bg-blue-600 hover:text-white hover:bg-blue-600 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list-task" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5H2zM3 3H2v1h1V3z" />
            <path d="M5 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM5.5 7a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9zm0 4a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1h-9z" />
            <path fill-rule="evenodd" d="M1.5 7a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5V7zM2 7h1v1H2V7zm0 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H2zm1 .5H2v1h1v-1z" />
          </svg></li>
        <li class="p-3 mr-1 rounded-full hover:text-white hover:bg-blue-600 cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-ui-checks-grid" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2 10a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1H2zm9-9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-3zm0 9a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-3zm0-10a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2h-3zM2 9a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h3a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H2zm7 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-3a2 2 0 0 1-2-2v-3zM0 2a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.354.854l-2 2a.5.5 0 0 1-.708 0l-1-1a.5.5 0 1 1 .708-.708L3 3.793l1.646-1.647a.5.5 0 1 1 .708.708z" />
          </svg></li>
      </ul>
      <div class="font-medium my-1">Sort By</div>
      <ul>
        <li class="px-2 py-1 my-1 text-white bg-blue-600 rounded hover:text-white hover:bg-blue-600 cursor-pointer">Name</li>
        <li class="px-2 py-1 my-1 rounded hover:text-white hover:bg-blue-600 cursor-pointer">Date</li>
        <li class="px-2 py-1 my-1 rounded hover:text-white hover:bg-blue-600 cursor-pointer">Price</li>
      </ul>
    </div>
  </div>
</div>