JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv'+content-type' content='text/html; charset=utf-8' />
<meta name='description' content='' />
<meta name='keywords' content='' />
<meta name='author' content='' />
<!--link rel='stylesheet' type='text/css' href='css\style.css' media='screen' /-->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
</head>
<body>
<h1 align='center'> Clicky Clacky </h1>
<table style='width:10%' align='center'>
<tr>
<td colspan = '2' align = 'center'><h2> AC Supply </h2></td>
</tr>
<tr>
<td>State </td>
<td id='ACstate'>Unknown</td>
</tr>
<tr>
<td>Current </td>
<td id='ACcurrent'>Unknown</td>
</tr>
<tr>
<td colspan='2' align='center'><b>Switch</b></td>
</td>
<tr>
<td><input type='Button' id='ACoff' value='OFF' style='background-color:green;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
<td><input type='Button' id='ACon' value='ON' style='background-color:red;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
</tr>
<tr>
<!-- SPACER -->
</table>
<br>
<table style='width:10%' align='center'>
<tr>
<td colspan = '2' align = 'center'><h2> DC Supply </h2></td>
</tr>
<tr>
<td>State </td>
<td id='DCstate'>Unknown</td>
</tr>
<tr>
<td>Current </td>
<td id='DCcurrent'>Unknown</td>
</tr>
<tr>
<td colspan='2' align='center'><b>Switch</b></td>
</td>
<tr>
<td><input type='Button' id='DCoff' value='OFF' style='background-color:green;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
<td><input type='Button' id='DCon' value='ON' style='background-color:red;color:white;margin-left:auto;margin-right:auto;display:block;margin-top:0%;margin-bottom:0%'></td>
</tr>
</table>
<br>
<table style='width:10%'...