JSFiddle - React, Tailwind, and code Playground

HTML

<input id="inp" type="checkbox" />
<div id="cb" class="inp_checkbox"></div>
Test

CSS

input[type=checkbox] {
	display:none;
}
.inp_checkbox {
	background:#fff;
	border:1px solid #919191;
	border-radius:1px;
	transition:all 0.3s ease 0s;
	box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.inp_checkbox.focus {
	border-color:#007fff !important;
	box-shadow:0 0 0 2px #007fff, 0 0 4px rgba(255,255,255,0.6);
}
.inp_checkbox {
	display:inline-block;
}
.inp_checkbox > div {
	display:flex;
	cursor:pointer;
	padding:1px;
    height:18px;
	width:18px;
}
.inp_checkbox > div > div {
	background:#424242;
	height:0;
	width:0;
	margin:auto;
	border-radius:1px;
}

JavaScript

function init_checkbox(input_id, check_id){
	var input = $('#'+input_id), checkbox = $('#'+check_id).html('<div></div>'), options = {
		duration : 200
	};
	
	checkbox.click(function(){
		input.prop('checked', !input.prop('checked')).focus().change();
	}), inner = $('<div></div>').appendTo(checkbox.find('div:first'));
	
	input.focus(function(){
		checkbox.addClass('focus');
	})
	.blur(function(){
		checkbox.removeClass('focus');
	})
	.change(function(){
		if(input.prop('checked')){
			inner.animate({
				height : 10,
				width : 10
			}, options);
		}
		else{
			inner.animate({
				height : 0,
				width : 0
			}, options);
		}
	});
}

init_checkbox('inp', 'cb');