<label for="toggle" class="inline-flex relative items-center cursor-pointer select-none">
      <input type="checkbox" id="toggle" class="sr-only peer"/>
      <div class="w-11 h-6 
        bg-gray-600
        dark:bg-gray-700
        peer-focus:ring-4
        peer-focus:ring-blue-300
        dark:peer-focus:ring-gray-300
        dark:peer-checked:bg-primary-600
        after:content-['']
        after:absolute 
        after:top-0.5
        after:left-[0.1rem]
        peer-checked:after:left-[1.4rem]
        after:bg-white
        after:border-gray-300
        after:bg-primary-50
        after:border
        after:rounded-full
        after:h-5
        after:w-5
        after:transition-all
        dark:border-gray-600
        peer-checked:bg-blue-600
        rounded-full"> </div>
      <span class="ml-3 text-sm font-medium text-gray-900 dark:text-primary-200">버튼 설명</span>
</label>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com