JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<input type="checkbox">

SCSS

input[type='checkbox']{
  appearance: none;
  width: 30px;
  height: 16px;
  border-radius: 8px;
  background-image: radial-gradient(circle at center, red 8px, transparent 7px), linear-gradient(to top, white 3px,gray 3px, gray 13px, white 13px);
  background-position: -7px;
  &:checked {
    background-position: 7px;
  }
}