JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

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

SCSS

/* html, body{
    padding:0;
    margin:1rem;
    font-family:'Open Sans';
} */
 
@keyframes dothabottomcheck{
    0% { height: 0; }
    100% { height: 10px;  }
}

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

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

.check-box {
    height: 20px;
    width: 20px;
    background-color: transparent;
    border: 1px solid #C4C4C4;
    border-radius: 2px;
    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.05s;
    -o-transition: border-color ease 0.05s;
    -webkit-transition: border-color ease 0.05s;
    transition: border-color ease 0.05s;
    cursor:pointer;

    &::before, &::after {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        height: 0px;
        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;
    }

    &::before {
        top: 15px;
        left: 8px;
        -moz-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        transform: rotate(-135deg);
    }

    &::after {
        top: 9px;
        left: 0px;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
   ...