Toggle Switch Button

Use this code to make a toggle button using Tailwind CSS, no other CSS Required. Adjust the size according to your needs.

Sample Code

<label class="flex items-center gap-2 cursor-pointer select-none w-fit">
 <input id="newArrivalFilter" type="checkbox" class="sr-only peer">
 <div class="block relative bg-gray-300 w-11 h-6 p-1 rounded-full before:top-[0.15rem] before:absolute before:bg-white before:w-5 before:h-5 before:p-1 before:rounded-full before:transition-all before:duration-500 before:left-1 peer-checked:before:left-[1.3rem] peer-checked:bg-blue-500"></div>
 <span class="text-sm text-black">Toggle</span>
</label>