Tailwind Checkboxes

by Hugo Vale Pereira

HTML

<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
  <h2 class="text-gray-900 text-4xl font-extrabold md:text-5xl lg:text-6xl">
    Checkboxes in
    <span
      class="text-transparent bg-clip-text bg-gradient-to-r to-indigo-600 from-violet-400"
      >Tailwind CSS</span
    >
  </h2>
  <label class="relative flex items-center mb-5 cursor-pointer my-7">
    <input type="checkbox" value="" class="sr-only peer" />
    <div
      class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-none rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700"
    ></div>
    <span class="ml-3 text-sm font-medium text-gray-600">Unchecked</span>
  </label>
  <label class="relative flex items-center mb-5 cursor-pointer">
    <input type="checkbox" value="" class="sr-only peer" checked />
    <div
      class="w-9 h-5 bg-gray-200 hover:bg-gray-300 peer-focus:outline-0 rounded-full peer transition-all ease-in-out duration-500 peer-checked:after:translate-x-full peer-checked:after:border-transparent after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-indigo-600 hover:peer-checked:bg-indigo-700"
    ></div>
    <span class="ml-3 text-sm font-medium text-gray-600">Checked</span>
  </label>
  <div class="flex items-center mb-5">
    <span class="mr-3 text-sm font-medium text-gray-600">Off</span>
    <label class="relative flex items-center cursor-pointer">
      <input type="checkbox" value="" class="sr-only peer" />
      <div
        class="w-9 h-5 bg-gray-200 hover:bg-gray-300...

JavaScript

tailwind.config = {
  /* Tailwind CSS config */
}