JSFiddle - React, Tailwind, and code Playground

HTML

<label name="k"><div class="lk">Left</div><input type="radio" name="k" value="lk"></label>
<label name="k"><div class="mk">Middle</div><input type="radio" name="k" value="mk"></label>
<label name="k"><div class="rk">Right</div><input type="radio" name="k" value="rk"></label>

CSS

.lk {
	width: 60px;
	height: 40px;
	border: 1px solid silver;
	text-align: center;
	padding-top: 10px;
	box-sizing: border-box;
	border-radius: 10px 0 0 10px;	
	float: left;
}
		.mk {
	width: 60px;
	height: 40px;
	border: 1px solid silver;
	text-align: center;
	padding-top: 10px;
	box-sizing: border-box;	
	float: left;
	margin-left: -1px;
}
		.rk {
	width: 60px;
	height: 40px;
	border: 1px solid silver;
	text-align: center;
	padding-top: 10px;
	box-sizing: border-box;
	border-radius: 0 10px 10px 0;
	float: left;
	margin-left: -1px;	
}
		.lk:hover, .mk:hover, .rk:hover {
	background: #e6e6e6;
	cursor: pointer;

}
		.lk:active, .mk:active, .rk:active {
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);	
}


		input[type="radio"] {

}	
		div:checked {
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);	
}

		div + input[type="radio"] {
	width: 60px;
	height: 40px;
	border: 1px solid silver;
	text-align: center;
	padding-top: 10px;
	box-sizing: border-box;
	border-radius: 0 10px 10px 0;
	float: left;
	margin-left: -1px;		
}