Tailwind CSS Checkbox

<div class="space-y-3">
  <div class="flex items-center space-x-2">
    <input type="checkbox" id="example1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example1" class="text-sm font-medium text-gray-700">Default</label>
  </div>
  <div class="flex items-center space-x-2">
    <input type="checkbox" id="example2" checked class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example2" class="text-sm font-medium text-gray-700">Checked</label>
  </div>
  <div class="flex items-center space-x-2">
    <input type="checkbox" id="example3" indeterminate class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example3" class="text-sm font-medium text-gray-700">Indeterminate</label>
  </div>
  <script>
    document.getElementById("example3").indeterminate = true;
  </script>
</div>

<div class="space-y-3">
  <div class="flex items-center space-x-2">
    <input type="checkbox" id="example4" disabled class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example4" class="text-sm font-medium text-gray-700">Default</label>
  </div>
  <div class="flex items-center space-x-2">
    <input type="checkbox" id="example5" checked disabled class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example5" class="text-sm font-medium text-gray-700">Checked</label>
  </div>
  <div class="flex items-center space-x-2">
    <input type="checkbox" id="example6" disabled class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example6" class="text-sm font-medium text-gray-700">Indeterminate</label>
  </div>
  <script>
    document.getElementById("example6").indeterminate = true;
  </script>
</div>

<div class="space-y-3">
  <div class="flex space-x-2">
    <div class="flex h-5 items-center">
      <input type="checkbox" id="example7" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    </div>
    <label for="example7" class="text-sm">
      <div class="font-medium text-gray-700">Remember me</div>
      <p class="text-gray-500">Save my login details for next time.</p>
    </label>
  </div>
</div>

<div class="space-y-3">
  <div class="flex space-x-2">
    <div class="flex h-5 items-center">
      <input type="checkbox" id="example8" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    </div>
    <label for="example8" class="flex space-x-2 text-sm">
      <div class="font-medium text-gray-700">
        I agree with the
        <a href="" class="text-primary-600 hover:text-primary-400">terms and conditions</a>.
      </div>
    </label>
  </div>
</div>

<div class="w-80">
  <div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
    <input type="checkbox" id="example9" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example9" class="flex w-full space-x-2 text-sm"> HTML </label>
  </div>
  <div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
    <input type="checkbox" id="example10" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example10" class="flex w-full space-x-2 text-sm"> CSS </label>
  </div>
  <div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
    <input type="checkbox" id="example11" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="example11" class="flex w-full space-x-2 text-sm"> Javascript </label>
  </div>
</div>

<div class="w-80">
  <div class="divide-y divide-gray-200 border-y border-gray-200">
    <div class="flex justify-between space-x-2 py-3">
      <label for="example12" class="text-sm">
        <div class="font-medium text-gray-700">Checkbox01</div>
        <p class="text-gray-500">This is a help message.</p>
      </label>
      <div class="flex h-5 items-center">
        <input type="checkbox" id="example12" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
      </div>
    </div>
    <div class="flex justify-between space-x-2 py-3">
      <label for="example13" class="text-sm">
        <div class="font-medium text-gray-700">Checkbox02</div>
        <p class="text-gray-500">This is a help message.</p>
      </label>
      <div class="flex h-5 items-center">
        <input type="checkbox" id="example13" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
      </div>
    </div>
    <div class="flex justify-between space-x-2 py-3">
      <label for="example14" class="text-sm">
        <div class="font-medium text-gray-700">Checkbox03</div>
        <p class="text-gray-500">This is a help message.</p>
      </label>
      <div class="flex h-5 items-center">
        <input type="checkbox" id="example14" name="checkGroup1" class="h-4 w-4 rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
      </div>
    </div>
  </div>
</div>