JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">	
		<div id="switch-1"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div><br><br>
		<div id="switch-2"><div class="light-1"></div><div class="switch"><div class="space"><div class="circle"></div></div></div><div class="light-2"></div></div>
	</div>

CSS

*{ margin:0; padding:0; outline:0;}

body{
	background: #202631;
}

#container{
	width: 200px;
	height: auto;
	margin: 0 auto;
	text-align: center;
	margin-top: 100px;
}

.light-1{
	width: 6px;
	height: 6px;
	border-radius: 50px;
	background: #8e3135;
	float: left;
	margin-top: 10px;
	margin-right: 7px;
}

.light-2{
	width: 6px;
	height: 6px;
	border-radius: 50px;
	background: #adafb2;
	float: left;
	margin-top: 10px;
	margin-left: 7px;

}

.space{
	-webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow:    inset 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
	box-shadow:         inset 0px 0px 30px 0px rgba(0, 0, 0, 0.75);
	width: 70px;
	height: 26px;
	border-radius: 100px;
	float: left;
}

.circle{
	background: url('http://k31.kn3.net/9/F/3/D/4/B/23C.png');
	width: 22px;
	height: 22px;
	margin: 2px 0 0 2px;
}

JavaScript

$(function(){
			$('.space').click(function(){
				if($('.circle').hasClass("detector")){
					$('.circle').animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').css("background","#8e3135"); $('.light-2').css("background","#adafb2"); $('.circle').removeClass("detector");});
				} else {
					$('.circle').animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').css("background","#adafb2"); $('.light-2').css("background","#8e3135"); $('.circle').addClass("detector");});
				}
			});

			$('.space').eq(1).click(function(){
				if($('.circle').eq(1).hasClass("detector-1")){
					$('.circle').eq(1).animate({ marginLeft: "2px"}, "slow", function(){$('.light-1').eq(1).css("background","#8e3135"); $('.light-2').eq(1).css("background","#adafb2"); $('.circle').eq(1).removeClass("detector-1");});
				} else {
					$('.circle').eq(1).animate({ marginLeft: "47px"}, "slow", function(){$('.light-1').eq(1).css("background","#adafb2"); $('.light-2').eq(1).css("background","#8e3135"); $('.circle').eq(1).addClass("detector-1");});
				}
			});
		});