JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<input type="checkbox" class="big-checkbox">

SCSS

input[type="checkbox"] {
    &.big-checkbox {
        margin: 0;
        padding: 0;
        outline: none;
        position: relative;
        background-image: none;
        -webkit-appearance: none;
        appearance: none;
        height: 45px;
        width: 45px;
        border-radius: 50%;
        border: 1px solid #979797;
        background-color: #F6F7F9;
        &:after {
            content: '';
            width: 8px;
            height: 18px;
            transform-origin: left top;
            border-right: 3px solid #F6F7F9;
            border-top: 3px solid #F6F7F9;
            left: 12px;
            top: 12px;
            position: absolute;
        }
        &:checked {
            border: 0;
            background-color: #5cbb21;
            &:after {
                top: 23px;
                border-right: 3px solid #fff;
                border-top: 3px solid #fff;
                animation-duration: 1s;
                animation-timing-function: ease;
                animation-name: checkmark;
                transform-origin: left top;
                transform: scaleX(-1) rotate(135deg);
            }
        }
    }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 8px;
    opacity: 1;
  }
  40% {
    height: 18px;
    width: 8px;
    opacity: 1;
  }
  100% {
    height: 18px;
    width: 8px;
    opacity: 1;
  }
}