Outline Colorful Checkboxes

This UI represents custom checkboxes with different border colors. Each checkbox is designed using Tailwind CSS classes and includes a hidden input element, a label, and an SVG checkmark icon. The label is styled based on the checked state (peer-checked:before:hidden and before:block) to show or hide the checkmark icon.