Swap

<div class="flex items-center justify-center gap-5">
   <label class="swap">
       <input type="checkbox" class="mb-0.5">
       <span class="text-xl text-primary font-bold swap-on mb-[-0.375rem]">ON</span> 
       <span class="text-xl text-secondary font-bold swap-off mb-[-0.375rem]">OFF</span>
   </label>
   <label class="swap">
       <input type="checkbox" class="mb-0.5">
       <span class="text-xl text-danger font-bold swap-on mb-[-0.375rem]">Close</span> 
       <span class="text-xl text-success font-bold swap-off mb-[-0.375rem]">Open</span>
   </label>
</div>

 <div class="flex items-center justify-center gap-5">     
   <label class="swap">
       <input class="mb-0.5" type="checkbox">
       <span class="text-3xl swap-on mb-[-0.3125rem]"><i data-feather="sun"></i></span>
       <span class="text-3xl swap-off mb-[-0.3125rem]"><i data-feather="moon"></i></span>
   </label>
   <label class="swap">
       <input type="checkbox" class="mb-0.5">
       <span class="swap-on mb-[-0.5625rem]"> +SVG_ICON("Volume-Off" ,"w-6 h-6 stroke-title") </span>
       <span class="swap-off mb-[-0.5625rem]"> +SVG_ICON("Volume-Up" ,"w-6 h-6 stroke-title") </span>
   </label>
   <label class="swap">
       <input type="checkbox" class="mb-0.5">
       <span class="swap-on mb-[-0.5625rem]"> +SVG_ICON("Show" ,"w-6 h-6 stroke-title") </span>
       <span class="swap-off mb-[-0.5625rem]"> +SVG_ICON("Hide" ,"w-6 h-6 stroke-title") </span>
   </label>
</div>

<div class="flex items-center justify-center gap-4">
  <div class="text-center">
      <label class="swap swap-flip text-[3.125rem]">
          <input class="mb-0.5" type="checkbox">
          <span class="text-3xl swap-on mb-[-0.5rem]">😈</span>
          <span class="text-3xl swap-off mb-[-0.5rem]">😇</span>
      </label> 
  </div>
  <div class="text-center">
      <label class="swap swap-flip text-[3.125rem]">
          <input class="mb-0.5" type="checkbox">
          <span class="text-3xl swap-on mb-[-0.5rem]">😔</span>
          <span class="text-3xl swap-off mb-[-0.5rem]">🙂</span>
      </label> 
  </div>
  <div class="text-center">
      <label class="swap swap-flip text-[3.125rem]">
          <input class="mb-0.5" type="checkbox">
          <span class="text-3xl swap-on mb-[-0.5rem]">😸</span>
          <span class="text-3xl swap-off mb-[-0.5rem]">😹</span>
      </label> 
  </div>
  <div class="text-center">
      <label class="swap swap-flip text-[3.125rem]">
          <input class="mb-0.5" type="checkbox">
          <span class="text-3xl swap-on mb-[-0.5rem]">✌🏻</span>
          <span class="text-3xl swap-off mb-[-0.5rem]">🤞🏻</span>
      </label> 
  </div>                       
</div>                       

<div class="text-center"> 
   <label class="swap swap-rotate">
       <input type="checkbox" class="mb-0.5">
       <span class="swap-on mb-[-0.25rem]"> img(src='../../assets/images/Like.svg' alt='like icon') </span>
       <span class="swap-off mb-[-0.25rem]"> img(src='../../assets/images/Like.svg' alt='like icon') </span>
   </label>
</div>