Radio

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="flex flex-col space-y-1.5" role="radiogroup">
  <div class="inline-flex items-start space-x-2">
    <input id="basic1" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="basic"/>
    <div class="flex flex-col space-y-1">
      <label for="basic1" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">I accept the deal</span>
      </label>
    </div>
  </div>
  <div class="inline-flex items-start space-x-2">
    <input id="basic2" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="basic"/>
    <div class="flex flex-col space-y-1">
      <label for="basic2" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">I do not accept</span>
      </label>
    </div>
  </div>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="flex flex-col space-y-1.5" role="radiogroup">
  <div class="inline-flex items-start space-x-2">
    <input id="disabled1" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" disabled="" name="disabled"/>
    <div class="flex flex-col space-y-1">
      <label for="disabled1" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">I accept the deal</span>
      </label>
    </div>
  </div>
  <div class="inline-flex items-start space-x-2">
    <input id="disabled2" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" disabled="" name="disabled"/>
    <div class="flex flex-col space-y-1">
      <label for="disabled2" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">I do not accept</span>
      </label>
    </div>
  </div>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<div class="flex flex-col space-y-1.5" role="radiogroup">
  <div class="inline-flex items-start space-x-2">
    <input id="error1" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="error"/>
    <div class="flex flex-col space-y-1">
      <label for="error1" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">I accept the deal</span>
      </label>
    </div>
  </div>
  <div class="inline-flex items-start space-x-2">
    <input id="error2" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="error" checked=""/>
    <div class="flex flex-col space-y-1">
      <label for="error2" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">I do not accept</span>
      </label>
    </div>
  </div>
  <p class="text-xs font-medium text-red-600">You have to accept to continue</p>
</div>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<fieldset class="space-y-3">
  <legend class="text-sm font-medium text-slate-900">Privacy:</legend>
  <div class="flex flex-col space-y-2 md:flex-row md:space-x-6 md:space-y-0">
    <div class="inline-flex items-start space-x-2">
      <input id="private" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="privacy"/>
      <div class="flex flex-col space-y-1">
        <label for="private" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
          <span class="font-medium text-slate-700">Private (Only Me)</span>
        </label>
      </div>
    </div>
    <div class="inline-flex items-start space-x-2">
      <input id="link" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="privacy"/>
      <div class="flex flex-col space-y-1">
        <label for="link" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
          <span class="font-medium text-slate-700">Shared via Link</span>
        </label>
      </div>
    </div>
    <div class="inline-flex items-start space-x-2">
      <input id="public" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="privacy" checked=""/>
      <div class="flex flex-col space-y-1">
        <label for="public" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
          <span class="font-medium text-slate-700">Public</span>
        </label>
      </div>
    </div>
  </div>
</fieldset>

// Needs TailwindCSS Forms Plugin https://github.com/tailwindlabs/tailwindcss-forms 
<fieldset class="space-y-6">
  <div class="inline-flex items-start space-x-2">
    <input id="tasks" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="desc"/>
    <div class="flex flex-col space-y-1">
      <label for="tasks" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">Tasks</span>
        <span class="text-slate-500">Get notified if there are new tasks added to your project, or if a task is completed.</span>
      </label>
    </div>
  </div>
  <div class="inline-flex items-start space-x-2">
    <input id="projects" type="radio" class="mt-0.5 cursor-pointer rounded-full text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-slate-200 disabled:opacity-75 border-slate-300" name="desc"/>
    <div class="flex flex-col space-y-1">
      <label for="projects" class="flex cursor-pointer flex-col space-y-1 truncate whitespace-normal text-sm text-slate-700">
        <span class="font-medium text-slate-700">Projects</span>
        <span class="text-slate-500">Get notified if there&#x27;s are new projects added to your teams.</span>
      </label>
    </div>
  </div>
</fieldset>