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: white;
    width: 22px;
    height: 22px;
    margin: 2px 0 0 2px;
    -moz-border-radius: 22px;
	-webkit-border-radius: 22px;
	border-radius: 22px;
}

JavaScript

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