JSFiddle - React, Tailwind, and code Playground

HTML

<span class="onoffswitch">
  <input type="checkbox" name="onoffswitch" id="myonoffswitch" checked>
  <label for="myonoffswitch">
    <span>Whatever OFF</span>
    <span>Whatever ON</span>
  </label>
</span>
<!-- zweiter Toggle-Button mit anderem name-Attributwert: -->
<span class="onoffswitch">
  <input type="checkbox" name="onoffswitch2" id="myonoffswitch2">
  <label for="myonoffswitch2">
    <span>My Stuff OFF</span>
    <span>My Stuff ON</span>
  </label>
</span>

CSS

/* Toogle-Button GEYSER ON/OFF */

/* Das Elternelement, das den Button realisiert */
.onoffswitch {
  display: inline-block;
  position: relative;
  width: 10em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* das <input> Element */
.onoffswitch input {
 position: absolute !important;
 height: 1px; width: 1px;
 overflow: hidden;
 clip: rect(1px, 1px, 1px, 1px);
}

/* das <label> Element */
.onoffswitch label {
  background: #f00;
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999;
  border-radius: 1em;
  white-space: nowrap;
}

/* beide <span> Elemente */
.onoffswitch span {
  color: #0f0;
  display: inline-block;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  margin: 0;
  padding: 0.3em 0 0.3em 0.5em;
  position: relative;
  transition: margin 0.3s ease-in 0s;
  width: calc(100% - 2em);
}

/* zweites <span> Element mit Schieber */
.onoffswitch span:nth-of-type(2) {
  background: #00f;
  color: #fff;
  padding-left: 1.5em;
  padding-right: 0.5em;
}

/* zweites <span> Element mit Schieber */
.onoffswitch span:nth-of-type(2):before {
  background: white;
  border: 2px solid #999;
  border-radius: 1em;
  content: "";
  margin: -0.3em;
  padding: 0.8em;
  position: absolute;
  left: -0.3em;
}

/* Umschaltvorgang */
.onoffswitch input:checked + label span:nth-of-type(1) {
  margin: calc(-50% + 0.8em);
}