JSFiddle - React, Tailwind, and code Playground

by Calvin Tomkins

HTML

<div><h3 style="margin: 5px;">Hall Lights</h3><div class="state" id="1"><span id="data1" class="data">1</span><i></i></div></div>
<p class="buttons">
<button id="b1" onclick="getElementById('1').innerHTML='1'">Turn On</button>
<button id="b4" onclick="getElementById('1').innerHTML='0'">Turn Off</button>
</p>

<div><h3 style="margin: 5px;">Foyer Lights</h3><div class="state" id="2"><span id="data2" class="data">0</span><i></i></div></div>
<p class="buttons">
<button id="b2" onclick="getElementById('2').innerHTML='1'">Turn On</button>
<button id="b5" onclick="getElementById('2').innerHTML='0'">Turn Off</button>
</p>

<div><h3 style="margin: 5px;">Caretaker</h3><div class="state" id="3"><span id="data3" class="data">1</span><i></i></div></div>
<p class="buttons">
<button id="b3" onclick="getElementById('3').innerHTML='1'">Turn On</button>
<button id="b6" onclick="getElementById('3').innerHTML='0'">Turn Off</button>
</p>
<br>
<div id="ta1">195</div>
<p id="tb1"></p>

<script>
$(document).ready(function(){
    setInterval(function(){
        $( "div:contains('1')" ).addClass("on").removeClass("off");}, 500);
});
$(document).ready(function(){
    setInterval(function(){
        $( "div:contains('0')" ).addClass("off").removeClass("on");}, 500);
});
</script>

<script>
setTimeout(function(){ document.getElementById("data2").innerHTML = "1"; }, 1200);
setTimeout(function(){ document.getElementById("data3").innerHTML = "0"; }, 3000);
setTimeout(function(){ document.getElementById("data2").innerHTML = "0"; }, 6600);
setTimeout(function(){ document.getElementById("data3").innerHTML = "1"; }, 5600);
</script>

CSS

* {
  font-family: Arial;
}

p.buttons {
  margin-top: 10px;
}

.data {
  display: none;
}

.state {
  float:right;
  position: relative;;
  width: 51px;
  height: 32px;
  border-radius: 32px; 
	border: 2px solid #e5e5e5;
	transition: all 0.30s ease;
  background: #ffffff;
}

.state i{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 32px;
	height: 32px;
	border-radius: 32px;
	box-shadow: 0 0 1px 0 rgba(0,0,0, 0.25), 0 3px 3px 0 rgba(0,0,0, 0.15);
	background: #ffffff;
	transition: all 0.3s cubic-bezier(0.275, -0.450, 0.725, 1.450);
}

.state.on i{
  left: 19px;
}

.on.state {
  background: #4cd964;
  border: 2px solid #4cd964;
}