Sort Toggle Button

<div class="inline-flex min-w-md rounded-lg border border-gray-100 bg-gray-200 p-1 transition-all duration-300 dark:border-gray-600 dark:bg-gray-900">
    <div class="w-1/3">
      <input type="radio" name="sort" class="peer sr-only" id="recent" checked />
      <label for="recent" class="peer block cursor-pointer rounded-md px-3 py-1 text-center text-sm text-gray-500 peer-checked:bg-white peer-checked:text-indigo-500 peer-checked:shadow-sm hover:text-gray-700 focus:relative md:px-4 md:py-2 dark:text-gray-400 peer-checked:dark:bg-gray-800 peer-checked:dark:text-gray-100 dark:hover:text-gray-300">Recent</label>
    </div>
    <div class="w-1/3">
      <input type="radio" name="sort" class="peer sr-only" id="popular" />
      <label for="popular" class="peer block cursor-pointer rounded-md px-3 py-1 text-center text-sm text-gray-500 peer-checked:bg-white peer-checked:text-indigo-500 peer-checked:shadow-sm hover:text-gray-700 focus:relative md:px-4 md:py-2 dark:text-gray-400 peer-checked:dark:bg-gray-800 peer-checked:dark:text-gray-100 dark:hover:text-gray-300">Popular</label>
    </div>
    <div class="w-1/3">
      <input type="radio" name="sort" class="peer sr-only" id="oldest" />
      <label for="oldest" class="peer block cursor-pointer rounded-md px-3 py-1 text-center text-sm text-gray-500 peer-checked:bg-white peer-checked:text-indigo-500 peer-checked:shadow-sm hover:text-gray-700 focus:relative md:px-4 md:py-2 dark:text-gray-400 peer-checked:dark:bg-gray-800 peer-checked:dark:text-gray-100 dark:hover:text-gray-300">Oldest</label>
    </div>
  </div>