Filter With Icons

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <h3 class="text-lg font-medium text-gray-700 mb-4">View Options</h3>
    
    <form class="flex flex-wrap gap-2 items-center">
      <input 
        type="reset" 
        value="×" 
        class="w-10 h-10 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
        
      <label class="relative">
        <input type="radio" name="view" value="grid" class="absolute opacity-0 peer" />
        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
          </svg>
          Grid
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="view" value="list" class="absolute opacity-0 peer" />
        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          List
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="view" value="columns" class="absolute opacity-0 peer" />
        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
          </svg>
          Columns
        </span>
      </label>
    </form>

    <div class="mt-8">
      <h3 class="text-lg font-medium text-gray-700 mb-4">Filter by Status</h3>
      
      <form class="flex flex-wrap gap-2 items-center">
        <input 
          type="reset" 
          value="×" 
          class="w-10 h-10 rounded-md bg-gray-200 text-gray-700 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition hidden peer-checked:inline-flex" />
          
        <label class="relative">
          <input type="radio" name="status" value="active" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-green-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-green-500"></span>
            Active
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="status" value="pending" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-yellow-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-yellow-500"></span>
            Pending
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="status" value="completed" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-blue-500"></span>
            Completed
          </span>
        </label>
        
        <label class="relative">
          <input type="radio" name="status" value="cancelled" class="absolute opacity-0 peer" />
          <span class="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer peer-checked:bg-red-500 peer-checked:text-white hover:bg-gray-200 transition">
            <span class="w-2 h-2 rounded-full bg-red-500"></span>
            Cancelled
          </span>
        </label>
      </form>
    </div>
  </div>
</section>