JSFiddle - React, Tailwind, and code Playground

by LijoCheeran

HTML

<div class="myDiv" style="padding:20px 0 20px 20px;">
<input type="checkbox" id="cbtest" />
<label for="cbtest" class="check-box"></label> 
 </div>

CSS

/* Made by Jimmy Gillam */
$checked-color: #34b93d;
$unchecked-color: #000;
$checkbox-height: 100px;
$background-color:#667788;
$font-color:#efefef;
$duration: .4s;
  
 
.myDiv{
    padding:0;
    margin:0;
    background-color:$background-color;
    color:$font-color;
    font-family:'Open Sans';
}
  

/* Checkmark style starts */
@-moz-keyframes dothabottomcheck{
    0% { height: 0; }
    100% { height: $checkbox-height/2; }
}

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

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

@keyframes dothatopcheck{
    0% { height: 0; }
    50% { height: 0; }
    100% { height: $checkbox-height * 1.2; }
}
@-webkit-keyframes dothatopcheck{
    0% { height: 0; }
    50% { height: 0; }
    100% { height: $checkbox-height * 1.2; }
}
@-moz-keyframes dothatopcheck{
    0% { height: 0; }
    50% { height: 0; }
    100% { height: $checkbox-height * 1.2; }
}

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

.check-box {
    height: $checkbox-height;
    width: $checkbox-height;
    background-color: transparent;
    border: $checkbox-height * .1 solid $unchecked-color;
    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 $duration/2;
    -o-transition: border-color ease $duration/2;
    -webkit-transition: border-color ease $duration/2;
    transition: border-color ease $duration/2;
    cursor:pointer;

    &::before, &::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        height: 0;
        width: $checkbox-height * .2;
        background-color: $checked-color;
        display: inline-block;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
       ...