JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<input type="checkbox" id="switch" class="switch-checkbox" />
<label for="switch" id="switch-label" class="switch"></label> 
<div id="box" class="red">
</div>
<div id="box" class="blue">
</div>

CSS

.switch-checkbox {
  display: none;
}

.switch {
  width: 34px;
  height: 14px;
  display: inline-block;
  position: relative;
  border-radius: 15px;
  background: #bdbdbd;
  cursor: pointer;
  transition: 0.2s;
}

.switch:after {
  content: '';
  top: -3px;
  left: 0;
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background: #efedef;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
  transition: left 0.2s;
}

.switch-checkbox:checked + .switch {
  background: #d0dbfc;
}

.switch-checkbox:checked + .switch:after {
  left: calc(100% - 20px);
  background-color: #167ee5;
}

/* Demo style */

body {
  font-family: arial;
  text-align: center;
  margin: 100px;
}

#box {
  height: 100px;
  width: 100px;
  display: none;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}


#switch:not(:checked) ~ #box.blue {
  display: block;
}

#switch:checked ~ #box.red {
  display: block;
}