Splendid insect

<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: simple, blue, switch, yes, no, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
    <div class="peer outline-none duration-100 after:duration-500 w-28 h-14 bg-blue-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500  after:content-['No'] after:absolute after:outline-none after:h-12 after:w-12 after:bg-white after:top-1 after:left-1 after:flex after:justify-center after:items-center  after:text-sky-800 after:font-bold peer-checked:after:translate-x-14 peer-checked:after:content-['Yes'] peer-checked:after:border-white">
  </div>
</label>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}
.relative {
  position: relative;
}
.inline-flex {
  display: inline-flex;
}
.h-14 {
  height: calc(0.25rem * 14);
}
.w-28 {
  width: calc(0.25rem * 28);
}
.cursor-pointer {
  cursor: pointer;
}
.items-center {
  align-items: center;
}
.bg-blue-300 {
  background-color: oklch(80.9% 0.105 251.813);
}
.duration-100 {
  --tw-duration: 100ms;
  transition-duration: 100ms;
}
.outline-none {
  --tw-outline-style: none;
  outline-style: none;
}
.peer-focus\:ring-4:is(:where(.peer):focus ~ *) {
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.peer-focus\:ring-blue-500:is(:where(.peer):focus ~ *) {
  --tw-ring-color: oklch(62.3% 0.214 259.815);
}
.peer-focus\:outline-none:is(:where(.peer):focus ~ *) {
  --tw-outline-style: none;
  outline-style: none;
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:top-1::after {
  content: var(--tw-content);
  top: 0.25rem;
}
.after\:left-1::after {
  content: var(--tw-content);
  left: 0.25rem;
}
.after\:flex::after {
  content: var(--tw-content);
  display: flex;
}
.after\:h-12::after {
  content: var(--tw-content);
  height: calc(0.25rem * 12);
}
.after\:w-12::after {
  content: var(--tw-content);
  width: calc(0.25rem * 12);
}
.after\:items-center::after {
  content: var(--tw-content);
  align-items: center;
}
.after\:justify-center::after {
  content: var(--tw-content);
  justify-content: center;
}
.after\:bg-white::after {
  content: var(--tw-content);
  background-color: #fff;
}
.after\:font-bold::after {
  content: var(--tw-content);
  --tw-font-weight: 700;
  font-weight: 700;
}
.after\:text-sky-800::after {
  content: var(--tw-content);
  color: oklch(44.3% 0.11 240.79);
}
.after\:duration-500::after {
  content: var(--tw-content);
  --tw-duration: 500ms;
  transition-duration: 500ms;
}
.after\:content-\[\'No\'\]::after {
  --tw-content: 'No';
  content: var(--tw-content);
}
.after\:outline-none::after {
  content: var(--tw-content);
  --tw-outline-style: none;
  outline-style: none;
}
.peer-checked\:after\:translate-x-14:is(:where(.peer):checked ~ *)::after {
  content: var(--tw-content);
  --tw-translate-x: calc(0.25rem * 14);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.peer-checked\:after\:border-white:is(:where(.peer):checked ~ *)::after {
  content: var(--tw-content);
  border-color: #fff;
}
.peer-checked\:after\:content-\[\'Yes\'\]:is(:where(.peer):checked ~ *)::after {
  --tw-content: 'Yes';
  content: var(--tw-content);
}

<!-- From Uiverse.io by Javierrocadev - Source: Javierrocadev - Tags: simple, blue, switch, yes, no, tailwind -->
<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" value="" class="sr-only peer">
    <div class="peer outline-none duration-100 after:duration-500 w-28 h-14 bg-blue-300 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-500  after:content-['No'] after:absolute after:outline-none after:h-12 after:w-12 after:bg-white after:top-1 after:left-1 after:flex after:justify-center after:items-center  after:text-sky-800 after:font-bold peer-checked:after:translate-x-14 peer-checked:after:content-['Yes'] peer-checked:after:border-white">
  </div>
</label>