JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="cbtest" />
<label for="cbtest" class="check-box"></label>

SCSS

$main-height: 24px;

@-moz-keyframes 
dothabottomcheck {  0% {height: 0;}
		               100% { height: $main-height/2;}
}

@-webkit-keyframes 
dothabottomcheck {  0% {height: 0;}
                   100% {height: $main-height/2;}
}

@keyframes 
dothabottomcheck {  0% {height: 0;}
                    100% {height: $main-height/2;}
}

@keyframes 
dothatopcheck {  0% {height: 0;}
                 50% {height: 0;}
                 100% {height: 30px;}
}

@-webkit-keyframes 
dothatopcheck {  0% {height: 0;}
                 50% {height: 0;}
                 100% {height: 30px;}
}

@-moz-keyframes 
dothatopcheck {  0% {height: 0;}
                 50% {height: 0;}
                 100% {height: 30px;}
}

input[type=checkbox] { display: none; }

.check-box {
  height: 24px;
  width: 24px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: border-color ease 0.2s;
  -o-transition: border-color ease 0.2s;
  -webkit-transition: border-color ease 0.2s;
  transition: border-color ease 0.2s;
  cursor: pointer;
}

.check-box::before,
.check-box::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  height: 0;
  width: 4px;
  background-color: #34b93d;
  display: inline-block;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;
  border-radius: 5px;
  content: ' ';
  -webkit-transition: opacity ease .5;
  -moz-transition: opacity ease .5;
  transition: opacity ease .5;
}


.check-box::before {
  top: 20px;
  left: 10px;
  box-shadow: 0 0 0 1px #667788;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform:...