JSFiddle - React, Tailwind, and code Playground

by Maksim Hrynevich

HTML

<label class="check">
	<input type="checkbox">
	<span>Value</span>
</label>

CSS

.check {
	position: relative;
	padding-left: 40px;
}

.check input {
	opacity: 0;
	transform: scale(0);
}

.check span:before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	position: absolute;
	left: 0;
	top: 0;
	background:#000;
}

.check input:checked + span:before {
	background: red;
}