Checkboxes
Ready to use Tailwind CSS checkbox components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Checkboxes are a small component but getting them to look good across browsers is one of those things that's more annoying than it should be. These use @tailwindcss/forms for consistent styling and include custom SVG check and indeterminate marks so they look the same everywhere. We have a simple standalone checkbox, one with a description below the label, a list of checkboxes for multi-select, and a list with avatars for things like team member selection. Copy, paste, done.
Tailwind
Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="mx-auto flex max-w-sm items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="terms" id="terms" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="terms" class="text-sm/6 text-gray-600">
I accept the
<a href="#" class="font-semibold text-pink-500">Terms of Service</a>
&
<a href="#" class="font-semibold text-pink-500">Privacy Policy</a>.
</label>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="mx-auto flex max-w-sm items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="updates" id="updates" aria-describedby="updates-description" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex flex-1 flex-col items-start">
<label for="updates" class="text-sm/6 font-medium text-gray-900">Product updates</label>
<p id="updates-description" class="text-sm text-gray-600">I would like to receive product updates via email.</p>
</div>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="mx-auto max-w-xs">
<fieldset>
<legend class="text-base font-semibold text-gray-900">Filter status</legend>
<div class="mt-4 space-y-2">
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="pending-payment" id="pending-payment" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="pending-payment" class="inline-block text-sm/6 font-medium text-gray-900">Pending payment</label>
</div>
</div>
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="processing" id="processing" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="processing" class="inline-block text-sm/6 font-medium text-gray-900">Processing</label>
</div>
</div>
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="on-hold" id="on-hold" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="on-hold" class="inline-block text-sm/6 font-medium text-gray-900">On hold</label>
</div>
</div>
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="completed" id="completed" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="completed" class="inline-block text-sm/6 font-medium text-gray-900">Completed</label>
</div>
</div>
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="cancelled" id="cancelled" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="cancelled" class="inline-block text-sm/6 font-medium text-gray-900">Cancelled</label>
</div>
</div>
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="refunded" id="refunded" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="refunded" class="inline-block text-sm/6 font-medium text-gray-900">Refunded</label>
</div>
</div>
<div class="flex items-start gap-x-2.5">
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="failed" id="failed" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
<div class="flex-1">
<label for="failed" class="inline-block text-sm/6 font-medium text-gray-900">Failed</label>
</div>
</div>
</div>
</fieldset>
</div>Requires @tailwindcss/forms plugin
Install via npm:
npm install -D @tailwindcss/forms
Add to tailwind.config.js:
plugins: [require('@tailwindcss/forms')]
<div class="mx-auto max-w-lg">
<fieldset>
<legend class="sr-only">People</legend>
<div class="divide-y divide-gray-200 border-y border-gray-200">
<div class="flex gap-3 pb-4 pt-3.5">
<div class="flex flex-1 items-start gap-3">
<div class="shrink-0">
<span class="relative mt-0.5 inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="flex-1 text-sm">
<label for="person-1" class="font-medium leading-6 text-gray-900">
Lila Bennett
<span class="font-normal text-gray-600">@lilab</span>
</label>
<p id="designation-1" class="text-gray-600">Senior UX Designer</p>
</div>
</div>
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="person-1" id="person-1" aria-describedby="designation-1" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="flex gap-3 pb-4 pt-3.5">
<div class="flex flex-1 items-start gap-3">
<div class="shrink-0">
<span class="relative mt-0.5 inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="flex-1 text-sm">
<label for="person-2" class="font-medium leading-6 text-gray-900">
Alex Rivera
<span class="font-normal text-gray-600">@alexr</span>
</label>
<p id="designation-2" class="text-gray-600">Data Science Lead</p>
</div>
</div>
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="person-2" id="person-2" aria-describedby="designation-2" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="flex gap-3 pb-4 pt-3.5">
<div class="flex flex-1 items-start gap-3">
<div class="shrink-0">
<span class="relative mt-0.5 inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="flex-1 text-sm">
<label for="person-3" class="font-medium leading-6 text-gray-900">
Casey Blake
<span class="font-normal text-gray-600">@caseyb</span>
</label>
<p id="designation-3" class="text-gray-600">Digital Marketing Strategist</p>
</div>
</div>
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="person-3" id="person-3" aria-describedby="designation-3" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="flex gap-3 pb-4 pt-3.5">
<div class="flex flex-1 items-start gap-3">
<div class="shrink-0">
<span class="relative mt-0.5 inline-block rounded-full">
<span aria-hidden="true" class="absolute inset-0 h-10 w-10 rounded-full ring-1 ring-inset ring-gray-900/10"></span>
<img alt="" class="h-10 w-10 rounded-full object-cover" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?q=80&w=256&h=256&auto=format&fit=facearea&facepad=2&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
</span>
</div>
<div class="flex-1 text-sm">
<label for="person-4" class="font-medium leading-6 text-gray-900">
Morgan Taylor
<span class="font-normal text-gray-600">@morgant</span>
</label>
<p id="designation-4" class="text-gray-600">Full-Stack Developer</p>
</div>
</div>
<div class="flex h-6 shrink-0 items-center">
<div class="group relative flex h-4 w-4">
<input type="checkbox" name="person-4" id="person-4" aria-describedby="designation-4" class="h-4 w-4 rounded border-gray-300 bg-white text-pink-500 checked:bg-none indeterminate:bg-none focus:border-gray-300 focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 focus:ring-offset-white disabled:bg-gray-100 disabled:checked:border-gray-300 disabled:checked:bg-gray-100 disabled:indeterminate:border-gray-300 disabled:indeterminate:bg-gray-100" />
<svg class="pointer-events-none absolute left-1/2 top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 stroke-white group-has-[:disabled]:stroke-gray-300" aria-hidden="true" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M2.5 6H9.5" stroke-width="1.67" stroke-linecap="round" />
<path class="opacity-0 group-has-[:checked]:opacity-100" d="M2 6.05059L4.47477 8.52525L10 3" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
</div>
</fieldset>
</div>Frequently asked questions
-
A simple checkbox with label, a checkbox with a longer description below the label, a vertical list of checkboxes for multi-select, and a list with avatars next to each option.
-
Yes, @tailwindcss/forms is needed. It resets the default browser checkbox appearance so the Tailwind styling works properly.
-
The custom SVGs for check and indeterminate states make the checkboxes look identical across all browsers. Without them, every browser renders its own checkmark differently.
-
Yes. They're standard checkbox inputs so they work in any form. The styling is self-contained and won't clash with other form elements.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.