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:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label for="basic1" class="cursor-pointer truncate text-sm 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:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label for="basic2" class="cursor-pointer truncate text-sm 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:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label
      for="disabled1"
      class="cursor-pointer truncate text-sm 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:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label
      for="disabled2"
      class="cursor-pointer truncate text-sm 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:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label for="error-1" class="cursor-pointer truncate text-sm 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:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
    <label for="error-2" class="cursor-pointer truncate text-sm text-gray-500">
      I don't accept the deal
    </label>
  </div>
  <p class="pt-1 text-xs text-red-600">You have to accept to continue</p>
</div>