Radios
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="flex flex-col space-y-1.5" role="radiogroup">
<div class="inline-flex items-center space-x-1.5">
<input
id="basic1"
type="radio"
name="deal"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="basic1" class="cursor-pointer truncate text-xs font-medium text-gray-500"> I accept the deal </label>
</div>
<div class="inline-flex items-center space-x-1.5">
<input
id="basic2"
type="radio"
name="deal"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="basic2" class="cursor-pointer truncate text-xs font-medium text-gray-500">
I don't accept the deal
</label>
</div>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="flex flex-col space-y-1.5" role="radiogroup">
<div class="inline-flex items-center space-x-1.5">
<input
id="disabled1"
type="radio"
name="deal-1"
disabled
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="disabled1" class="cursor-pointer truncate text-xs font-medium text-gray-500"> I accept the deal </label>
</div>
<div class="inline-flex items-center space-x-1.5">
<input
id="disabled2"
type="radio"
name="deal-1"
disabled
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="disabled2" class="cursor-pointer truncate text-xs font-medium text-gray-500">
I don't accept the deal
</label>
</div>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="flex flex-col space-y-1.5" role="radiogroup">
<div class="inline-flex items-center space-x-1.5">
<input
id="error-1"
type="radio"
name="deal-2"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="error-1" class="cursor-pointer truncate text-xs font-medium text-gray-500"> I accept the deal </label>
</div>
<div class="inline-flex items-center space-x-1.5">
<input
id="error-2"
type="radio"
name="deal-2"
checked
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="error-2" class="cursor-pointer truncate text-xs font-medium text-gray-500">
I don't accept the deal
</label>
</div>
<p class="pt-1 text-xs font-medium text-red-600">You have to accept to continue</p>
</div>
You have to accept to continue
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<fieldset class="space-y-3">
<legend class="text-xs font-medium text-gray-900">Privacy:</legend>
<div class="flex flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-6">
<div class="inline-flex items-center space-x-1.5">
<input
id="private"
type="radio"
name="privacy"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="private" class="cursor-pointer truncate text-xs font-medium text-gray-500"> Private (Only Me) </label>
</div>
<div class="inline-flex items-center space-x-1.5">
<input
id="basic"
type="radio"
name="privacy"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="basic" class="cursor-pointer truncate text-xs font-medium text-gray-500"> Shared via Link </label>
</div>
<div class="inline-flex items-center space-x-1.5">
<input
id="public"
type="radio"
name="privacy"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="public" class="cursor-pointer truncate text-xs font-medium text-gray-500"> Public </label>
</div>
</div>
</fieldset>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<fieldset class="space-y-6">
<div class="inline-flex w-full items-start space-x-1.5">
<input
id="1"
type="radio"
name="desc"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="1" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-xs">
<span class="font-medium text-gray-900">Tasks</span>
<span class="text-gray-500">
Get notified if there's are new tasks added to your project, or if a task is completed.
</span>
</label>
</div>
<div class="inline-flex w-full items-start space-x-1.5">
<input
id="2"
type="radio"
name="desc"
class="cursor-pointer rounded-full border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
<label for="2" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-xs">
<span class="font-medium text-gray-900">Projects</span>
<span class="text-gray-500"> Get notified if there's are new projects added to your teams. </span>
</label>
</div>
</fieldset>