Myna UI

Checkboxes

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="inline-flex items-center space-x-1.5">
  <input
    id="basic"
    type="checkbox"
    class="cursor-pointer rounded 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"> Are you ready? </label>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="inline-flex items-center space-x-1.5">
  <input
    disabled
    id="disabled"
    type="checkbox"
    class="cursor-pointer rounded border-gray-300 text-blue-600 transition focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75" />
  <label for="disabled" class="cursor-pointer truncate text-xs font-medium text-gray-500"> Are you ready? </label>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="space-y-1">
  <div class="inline-flex items-center space-x-1.5">
    <input
      checked
      id="error"
      type="checkbox"
      class="cursor-pointer rounded 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" class="cursor-pointer truncate text-xs font-medium text-gray-500"> Are you ready? </label>
  </div>
  <p class="text-xs font-medium text-red-600">I don't think you are ready.</p>
</div>

I don't think you are ready.

<!-- 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="checkbox"
        class="cursor-pointer rounded 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="checkbox"
        class="cursor-pointer rounded 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="checkbox"
        class="cursor-pointer rounded 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>
Privacy:
<!-- 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="checkbox"
      class="cursor-pointer rounded 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="checkbox"
      class="cursor-pointer rounded 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>