<div class="flex ">
  <div class="flex max-w-max flex-col items-start gap-4 lg:gap-6">
    <label for="switch13" class="switch flex justify-center">
      <input id="switch13" type="checkbox" checked />
      <span class="inner"></span>
      Default
    </label>
    <label for="switch14" class="switch flex justify-center">
      <input id="switch14" type="checkbox" checked />
      <span class="inner primary"></span>
      Primary
    </label>
    <label for="switch15" class="switch flex justify-center">
      <input id="switch15" type="checkbox" checked />
      <span class="inner secondary"></span>
      Secondary
    </label>
    <label for="switch16" class="switch flex justify-center">
      <input id="switch16" type="checkbox" checked />
      <span class="inner info"></span>
      Info
    </label>
    <label for="switch17" class="switch flex justify-center">
      <input id="switch17" type="checkbox" checked />
      <span class="inner success"></span>
      Success
    </label>
    <label for="switch18" class="switch flex justify-center">
      <input id="switch18" type="checkbox" checked />
      <span class="inner warning"></span>
      Warning
    </label>
    <label for="switch19" class="switch flex justify-center">
      <input id="switch19" type="checkbox" checked />
      <span class="inner error"></span>
      Error
    </label>
    <label for="switch20" class="switch flex justify-center">
      <input id="switch20" type="checkbox" checked disabled />
      <span class="inner disabled"></span>
      Disabled
    </label>
  </div>
</div>
                  

<div class="flex justify-center gap-4">
  <label for="switch5" class="switch">
    <input id="switch5" type="checkbox" checked />
    <span class="inner large primary"></span>
  </label>
  <label for="switch6" class="switch">
    <input id="switch6" type="checkbox" checked />
    <span class="inner primary"></span>
  </label>
  <label for="switch7" class="switch">
    <input id="switch7" type="checkbox" checked />
    <span class="inner small primary"></span>
  </label>
</div>

                  

<div class="flex justify-center flex-wrap gap-4 lg:gap-6">
  <label for="switch9" class="switch flex flex-col">
    Top
    <input id="switch9" type="checkbox" />
    <span class="inner primary"></span>
  </label>
  <label for="switch10" class="switch flex">
    Start
    <input id="switch10" type="checkbox" checked />
    <span class="inner primary"></span>
  </label>
  <label for="switch11" class="switch flex flex-col">
    <input id="switch11" type="checkbox" />
    <span class="inner primary"></span>
    Bottom
  </label>
  <label for="switch12" class="switch flex">
    <input id="switch12" type="checkbox" checked />
    <span class="inner primary"></span>
    End
  </label>
</div>