Filter Basic

                    <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">Filter Frameworks</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="frameworks" value="svelte" class="absolute opacity-0 peer" />
        <span class="inline-flex 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">
          Svelte
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="frameworks" value="vue" class="absolute opacity-0 peer" />
        <span class="inline-flex 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">
          Vue
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="frameworks" value="react" class="absolute opacity-0 peer" />
        <span class="inline-flex 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">
          React
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="frameworks" value="angular" class="absolute opacity-0 peer" />
        <span class="inline-flex 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">
          Angular
        </span>
      </label>
    </form>
  </div>
</section>