JSFiddle - React, Tailwind, and code Playground

HTML

<div>
		<input type="checkbox" id="checkbox-1-1" class="regular-checkbox flaticon-boxing3" />
		<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" />
		<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" />
	</div>

CSS

.regular-checkbox {
	vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align: center;
	color: #39c;
	width: 140px;
	height: 140px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background-color: #fff;
	border: solid 1px #ccc;
	-webkit-appearance: none;
	background-color: #fff;
	display: inline-block;
	position: relative;
    outline:0;
}

.regular-checkbox:checked, .regular-checkbox:checked:hover {
	background-color: #39c;
	color: #fff !important;
}

.regular-checkbox:hover {
	background-color: #f0f7f9;
}

.regular-checkbox:checked:after {
	color: #fff;
	position: absolute;
	top: 0px;
	left: 3px;
	color: #99a1a7;
}