Checkbox
Below you can find a checkbox component styled with tailwindcss.
Preview - Checkbox
HTML
<div class="flex items-center">
<input id="default-normal" type="checkbox" class="hidden peer" value />
<label for="default-normal" class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span class>accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" class="text-brand-primary-500 hover:no-underline">Privacy Policy</a>
</span>
</label>
</div>React
<div className="flex items-center">
<input id="default-normal" type="checkbox" className="hidden peer" value />
<label for="default-normal" className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span class>accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" className="text-brand-primary-500 hover:no-underline">Privacy Policy</a>
</span>
</label>
</div>Preview - Checkbox Small
HTML
<div class="flex items-center">
<input id="default-small" type="checkbox" class="hidden peer" value />
<label for="default-small" class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px]">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span class>accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" class="text-brand-primary-500 hover:no-underline">Privacy Policy</a>
</span>
</label>
</div>React
<div className="flex items-center">
<input id="default-small" type="checkbox" className="hidden peer" value />
<label for="default-small" className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px]">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span class>accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" className="text-brand-primary-500 hover:no-underline">Privacy Policy</a>
</span>
</label>
</div>Preview - Checkbox with error state
HTML
<div class="flex items-center">
<input id="error-normal" type="checkbox" class="hidden peer" value />
<label for="error-normal" class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end before:border-danger">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span class="text-danger">accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" class="text-brand-primary-500 hover:no-underline text-neutral-600 dark:text-neutral-200">Privacy Policy</a>
</span>
</label>
</div>React
<div className="flex items-center">
<input id="error-normal" type="checkbox" className="hidden peer" value />
<label for="error-normal" className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-3 before:h-3 before:rounded text-base before:border-2 peer-checked:before:ring-2 peer-checked:before:ring-offset-2 items-end before:border-danger">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span className="text-danger">accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" className="text-brand-primary-500 hover:no-underline text-neutral-600 dark:text-neutral-200">Privacy Policy</a>
</span>
</label>
</div>Preview - Checkbox Small with error state
HTML
<div class="flex items-center">
<input id="error-small" type="checkbox" class="hidden peer" value />
<label for="error-small" class="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px] before:border-danger">
<span class="text-neutral-600 dark:text-neutral-200">
I
<span class="text-danger">accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" class="text-brand-primary-500 hover:no-underline text-neutral-600 dark:text-neutral-200">Privacy Policy</a>
</span>
</label>
</div>React
<div className="flex items-center">
<input id="error-small" type="checkbox" className="hidden peer" value />
<label for="error-small" className="flex justify-center text-neutral-600 dark:text-neutral-200 cursor-pointer before:rounded before:border-neutral-600 dark:before:border-neutral-200 before:mr-1 hover:before:border-brand-primary-500 dark:hover:before:border-brand-primary-500 peer-checked:before:bg-brand-primary-500 peer-checked:before:border-brand-primary-500 peer-checked:before:ring-inset dark:peer-checked:before:ring-offset-theme-dark peer-checked:before:ring-brand-primary-500 transition-all duration-300 before:transition-all before:duration-300 before:w-2 before:h-2 before:rounded-[2.66px] text-xs before:border peer-checked:before:ring-[1.33px] peer-checked:before:ring-offset-[1.33px] items-center before:mt-[2px] before:border-danger">
<span className="text-neutral-600 dark:text-neutral-200">
I
<span className="text-danger">accept</span>
the
<a href="https://www.iubenda.com/privacy-policy/463009" target="_blank" rel="noopener noreferrer" className="text-brand-primary-500 hover:no-underline text-neutral-600 dark:text-neutral-200">Privacy Policy</a>
</span>
</label>
</div>