Checkbox Generator

Preview

Output format

Tailwind

1<label class="flex items-center gap-2 cursor-pointer select-none text-[16px] text-[#000000]">
2  <div class="relative flex items-center justify-center">
3    <input type="checkbox" class="sr-only peer" />
4    <div class="w-[20px] h-[20px] rounded-[4px] border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:bg-[#3b82f6] peer-checked:border-[#3b82f6] transition-all duration-[200ms]"></div>
5    <svg class="absolute w-3 h-3 text-[#ffffff] opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
6  </div>
7  Checkbox Label
8</label>