JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox">

CSS

input[type='checkbox'] { 
    height: 20px;
	border:1px solid #B5B7B8;
	font: 14px/26px 'pt-sans', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
	padding:7px 7px 7px 12px;
	/*margin:0 0 30px 0;*/
	background:#FFF;
	border:1px solid #d5d5d6;
	outline:none;
	color:#96999D;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);        
	-webkit-appearance: none;
	-webkit-font-smoothing: antialiased;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
	-webkit-transition: all 0.15s;
	   -moz-transition: all 0.15s;
		-ms-transition: all 0.15s;
		 -o-transition: all 0.15s;
		  	transition: all 0.15s;			
}

input[type=checkbox]:focus
  {
	border-color: #ACACB8;
	color: #2E3236;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
	   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
	        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18)!important;
}
input[type='checkbox']:checked
{
    position:relative;
}
input[type='checkbox']:checked:before
{
    content:'';
    display:block;
    width:17px;
    height:16px;
    position:absolute;
    top:1px;
    left:1px;
    background:none #ACACB8;
    -webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
    opacity:0.5;
}