<div class="flex gap-1 sm:gap-2"> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="monday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Mon</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="tuesday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Tue</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="wednesday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Wed</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="thursday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Thu</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="friday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Fri</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="saturday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Sat</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="sunday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Sun</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> </div>

