JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

<label class="regular-checkbox">
    <input type="checkbox">
    <small></small>
</label>

CSS

.regular-checkbox{
		display: inline-block;
		border-radius: 50%;
		width: 38px;
		height: 38px;
		border: 1px solid #ccc;
	}
	.regular-checkbox input{
		opacity: 0;
		position: absolute;
	}
	.regular-checkbox small{
		width: 100%;
		height: 100%;
		float: left;
	}
  	.regular-checkbox input ~ small:after{
		content: '\00d7';
		height: 38px; 
		width: 38px;
		color: green;
		font-size: 26px;
		text-align: center;
		float: left;
	}
	.regular-checkbox input:checked ~ small:after{
		content: '\2714';
		height: 38px; 
		width: 38px;
		color: green;
		font-size: 26px;
		text-align: center;
		float: left;
	}