JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<div class="super-checkbox-container">
  <label class="super-checkbox">
    <input type="checkbox">
    <span class="super-checkbox-block"></span>
  </label>
  <span class="super-checkbox-label">Click here</span>
</div>

CSS

body {
  padding: 50px;
}

.super-checkbox {
  display: inline-block;
}

.super-checkbox-container {
  display: flex;
  align-items: center;
}

.super-checkbox-block {
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: solid 1px #e8edf6;
  background-color: #e8edf6;
  position: relative;
  transition: border-color 0.05s linear, background-color 0.05s linear;
  cursor: pointer;
}

.super-checkbox-block::before {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
  transition: left 0.05s linear;
}

:checked + .super-checkbox-block {
  border: solid 1px #34bf6e;
  background-color: #34bf6e;
}

:checked + .super-checkbox-block::before {
  left: 19px;
}

.super-checkbox input {
  display: none;
}

.super-checkbox :checked + span {
  color: red;
}

.super-checkbox-label {
  margin-left: 0.5em;
}