JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1"><img src="http://www.pixhoster.info/f/2016-08/45d2f8ed7b4532a519d138d0484fb881.png"/></label>
</div>

<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2"><img src="http://www.pixhoster.info/f/2016-08/45d2f8ed7b4532a519d138d0484fb881.png"/></label>
</div>

<div>	
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3"><img src="http://www.pixhoster.info/f/2016-08/45d2f8ed7b4532a519d138d0484fb881.png"/></label>
</div>

<div>	
<input type="radio" name="radio" id="radio4" class="radio"/>
<label for="radio4"><img src="http://www.pixhoster.info/f/2016-08/45d2f8ed7b4532a519d138d0484fb881.png"/></label>
</div>

CSS

body {
	margin: 10px;
	color: #999;
}

form {
	margin: 40px 0px;
}

div {
	clear: both;	
  margin: 0 40px;
}

div:hover {
	clear: both;	
  margin: 0 40px;
}

label {
  border: 2px solid #D1D3D4;
  border-radius: 5px;
}

/* hide input */
input.radio:empty {
	margin-left: -9999px;
}



/* style label */
input.radio:empty ~ label {
  margin: margin: 10px 10px 10px 10px;
	float: left;
	position: relative;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-top: 2em;
  padding:10px;
	cursor: pointer;
  
}

/*styling for the whole element*/
input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
}


label:hover {
  border: 2px solid #3DBB5D;
  border-radius: 5px;
}

/*after part*/
input.radio:hover:not(:checked) ~ label {
	color: #888;
  background: #E1E3E4
}

/* toggle on */
input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #3DBB5D;
}

/*after part*/
input.radio:checked ~ label {
	color: #777;
  background: #4DCB6D
}

/* radio focus */
input.radio:focus ~ label {
	box-shadow: 0 0 0 3px #999;
}

JavaScript

$('#sites input:radio').addClass('input_hidden');
$('#sites label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});