JSFiddle - React, Tailwind, and code Playground

by Nidhi Soni

HTML

<div class="had">
			<div class="ch">
				<input type="checkbox" id="sho1" name="chk1">
				<div class="so"></div>
				<label for="sho1">Select one</label>
			</div>
			<div class="ch">
				<input type="checkbox" id="sho2" name="chk2">
				<div class="so"></div>
				<label for="sho2">Select two</label>
			</div>
		</div>

CSS

*{margin: 0px;padding: 0px;}
input{display: none;}
input[type=checkbox]:checked+.so{background-image:url('http://goo.gl/3tza1X');background-repeat:no-repeat;background-color:green;border-radius:50%;background-position: -2px -1px;}
input[type=checkbox]:checked+.so+label{color: red;}
.so{margin: 2px; float: left;height: 30px;width: 30px;border: 3px solid #D8D8D8;background-color: #4679BD;border-radius: 5px;}
.show{margin-left: 30px;}
.had{margin: 50px auto;width: 50%;border: 1px solid black;height: 30px;padding:10px;}
.ch{float: left;margin-left:20px;width:40%}
label{height: 30px;width: 100%;position:relative;display:block;margin-top: 5px;}