JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<script src="https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png"></script>
<div>
    <input type="checkbox" id="c1" name="cc"/>
		<label for="c1">
			<span></span>
		</label>
	</div>

CSS

input[type="checkbox"] {
    display:none;
	}
	
	input[type="checkbox"] + label span{
		display:inline-block;
		width:16px;
		height:16px;
		background:url(checkbox-sprite.svg) left top no-repeat;
		margin:-1px 4px 0 0;
		vertical-align:middle;
		cursor:pointer;
	}

	input[type="checkbox"]:checked + label span {
		background:url(checkbox-sprite.svg) left bottom -32px no-repeat;
	}