Filter With Js

                    <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 Categories</h3>
    
    <div class="mb-4 flex flex-wrap gap-2 items-center" id="filter-container">
      <button 
        type="button" 
        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" 
        id="reset-button">×</button>
        
      <label class="relative">
        <input type="radio" name="categories" value="all" class="absolute opacity-0 filter-radio" checked />
        <span class="inline-flex px-4 py-2 rounded-md bg-blue-500 text-white cursor-pointer hover:bg-blue-600 transition">
          All
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="categories" value="technology" class="absolute opacity-0 filter-radio" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200 transition">
          Technology
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="categories" value="design" class="absolute opacity-0 filter-radio" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200 transition">
          Design
        </span>
      </label>
      
      <label class="relative">
        <input type="radio" name="categories" value="business" class="absolute opacity-0 filter-radio" />
        <span class="inline-flex px-4 py-2 rounded-md bg-gray-100 text-gray-700 cursor-pointer hover:bg-gray-200 transition">
          Business
        </span>
      </label>
    </div>
    
    <!-- Example content to be filtered -->
    <div class="grid grid-cols-1 gap-4 mt-6">
      <div class="p-4 border rounded-md" data-category="technology">
        <h4 class="font-medium">Web Development</h4>
        <p class="text-sm text-gray-600">Front-end and back-end technologies</p>
      </div>
      
      <div class="p-4 border rounded-md" data-category="design">
        <h4 class="font-medium">UI/UX Design</h4>
        <p class="text-sm text-gray-600">Creating beautiful user interfaces</p>
      </div>
      
      <div class="p-4 border rounded-md" data-category="business">
        <h4 class="font-medium">Digital Marketing</h4>
        <p class="text-sm text-gray-600">Strategies for online growth</p>
      </div>
      
      <div class="p-4 border rounded-md" data-category="technology">
        <h4 class="font-medium">Mobile Development</h4>
        <p class="text-sm text-gray-600">Building apps for iOS and Android</p>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const filterRadios = document.querySelectorAll('.filter-radio');
      const resetButton = document.getElementById('reset-button');
      const items = document.querySelectorAll('[data-category]');
      
      // Handle filter change
      filterRadios.forEach(radio => {
        radio.addEventListener('change', function() {
          const selectedValue = this.value;
          
          // Show reset button only when not on "All"
          resetButton.classList.toggle('hidden', selectedValue === 'all');
          
          // Update active styles
          filterRadios.forEach(r => {
            const span = r.nextElementSibling;
            if (r.checked) {
              span.classList.remove('bg-gray-100', 'text-gray-700');
              span.classList.add('bg-blue-500', 'text-white');
            } else {
              span.classList.remove('bg-blue-500', 'text-white');
              span.classList.add('bg-gray-100', 'text-gray-700');
            }
          });
          
          // Filter items
          items.forEach(item => {
            if (selectedValue === 'all' || item.dataset.category === selectedValue) {
              item.classList.remove('hidden');
            } else {
              item.classList.add('hidden');
            }
          });
        });
      });
      
      // Reset button handler
      resetButton.addEventListener('click', function() {
        const allRadio = document.querySelector('.filter-radio[value="all"]');
        allRadio.checked = true;
        allRadio.dispatchEvent(new Event('change'));
      });
    });
  </script>
</section>