JSFiddle - React, Tailwind, and code Playground

by Brandon Lint

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0034)http://192.168.1.2/debug/clip.html -->
        <title>Controller</title>
 
    </head>

    <body>
<center>
			<div>
             <h2 style="display:inline-block; width: 65px"> </h2>
			<div class= "buttOn" style="width:70px;" onclick="dim(1)"><center>100%</center></div>
       		<div class= "buttOn" style="width:70px;" onclick="dim(2)"><center>50%</center></div>
            <div class= "buttOn" style="width:70px;" onclick="dim(3)"><center>25%</center></div>
       		</div>

     		<div>
    		<div style="display: inline-block;">
            <h2 style="display:inline-block; width: 65px;"> Lab </h2>
            <div class= "buttOn" onclick="loc(1), clearOffstate(stateLog),TurnOn(locFinal), test()">On</div>
            <div class= "buttOff" onclick="loc(1), state(4),TurnOn(locFinal)">Off</div>
            </div>
            
            <div>
            <h2 style="display:inline-block; width: 65px"> Door </h2>
            <div class= "buttOn" onclick="loc(4), clearOffstate(stateLog), TurnOn(locFinal)"><center>On</center></div>
            <div class= "buttOff" onclick="loc(4), state(4),TurnOn(locFinal)"><center>Off</center></div>
            </div>
            
            <div>
            <h2 style="display:inline-block; width: 65px"> Hall </h2>
            <div class= "buttOn" onclick="loc(2), clearOffstate(stateLog), TurnOn(locFinal)"><center>On</center></div>
            <div class= "buttOff" onclick="loc(2), state(4),TurnOn(locFinal)"><center>Off</center></div>
            </div>
            
            <div>
            <h2 style="display:inline-block; width: 65px"> Bed</h2>
            <div class= "buttOn" onclick="loc(3), clearOffstate(stateLog), TurnOn(locFinal)"><center>On</center></div>
            <div class= "buttOff" onclick="loc(3), state(4),TurnOn(locFinal)"><center>Off</center></div>
           ...

CSS

body {
	 font-family: verdana;
	 margin: 20px;
	 }
            h1{
                margin: 0px 20px 0px 0px;
                font-size: 20px;
            }
            h2{
                font-size: 16px;
                margin-top: 20px;
                color: grey;
			}
			.buttSec{
      			width: 150px;
      			height: 50px;
				border: 2px solid;
				display: inline-block;
				text-align:center;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				line-height: 50px;
      			text-align: center;
				color:white;
				background-color: white;
				font-family: verdana;
				margin-top: 75px;
				opacity: 0.0;
			}
			
				.buttSec:active {
				border: solid;
				color: green;
				border-color: green;
				background-color:white;
				opacity: 1.0;
			}
			
					.buttSec2{
      			width: 150px;
      			height: 50px;
				border: 2px solid;
				display: inline-block;
				text-align:center;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				line-height: 50px;
      			text-align: center;
				color:white;
			}
				.buttSec2:active {
				border: solid;
				color: red;
				border-color: red;
				background-color:white;
			}
			
			.buttOn{
      			width: 150px;
      			height: 50px;
				border: 2px solid;
				margin: 10px 10px 10px 10px;
				display: inline-block;
				text-align:center;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				line-height: 50px;
      			text-align: center;
				color:grey;
			}
			.buttOn:hover {
				cursor: pointer;
			}
			.buttOn:active {
				color:white;
				background-color:green;
			}
			
			.buttOff{
      			width: 150px;
      			height: 50px;
				border: 2px solid;
				margin: 10px 10px 10px 10px;
				display: inline-block;
				text-align:center;
				-webkit-border-radius: 10px;
				-moz-border-radius: 10px;
				line-height: 50px;
      			text-align: center;
				color:grey;
			}
			.buttOff:hover {
				cursor: pointer;
			}
			.buttOff:active...

JavaScript

function test()
{
    alert ("Hello World");
}