JSFiddle - React, Tailwind, and code Playground

by Avik

HTML

<label for="bg_1">
  <img id="bg_img_select_div" src="http://www.gravatar.com/avatar/29ba0fa62649ce9cb284a97a824a78cd?d=identicon&s=80"  />
  <input id="bg_1" class="check_rad" name="user_bg" checked="checked" type="radio" value="bg_1" />
</label>
<label for="bg_5">
    <img id="bg_img_select_div" src="http://www.gravatar.com/avatar/0043e73d2460fe8ca168acca1672c68e?d=identicon&s=80" />
    <input id="bg_5" class="check_rad" name="user_bg" type="radio" value="bg_5"/>
</label>

CSS

#bg_img_select_div { border:5px solid #fff; max-width:100px; height:100px; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s;  -o-transition-duration: 0.2s;}

#bg_img_select_div:hover { border:5px solid #fff; box-shadow:0px 1px  10px #ADADAD;}

	#bg_img_select_div.active { border:5px solid #333; box-shadow:0px 1px  10px #ADADAD;}

JavaScript

$(function(){
	$("#bg_img_select_div").click(function () {
		$("#bg_img_select_div").toggleClass("active");
	});
});