JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Dashboard</h2>
<div class="wrapper">
  <div class="one">
    <div class="two">
    <a href="index3.php"><button class="button">Breaker 1</button></a>
    <button class="button2">Status</button>
    </div>
    <div class="three">
    <a href="index3.php"><button class="button">Breaker 2</button></a>
    <button class="button2">Status</button>
    </div>
  </div>
</div>

CSS

<style>
div{
  float: left;
  color:#fff;
  font-size:40px;
}

h2{
  text-align: center;
}

.wrapper{
  position: absolute;
  top: 25%;
  left: 10%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.one{
  width: 125px;
  height:100px;
}

.two{
  width: 120px;
  height:75px;
  background:darkblue;
}

.three{
  width:120px;
  height:75px;
  background:blue;
}

.button{
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
  position: relative;
  left: 15%;
}

.button2{
  background-color: #4CAF50; /* Green */
  border: 1px solid green;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
  position: relative;
  left: 15%;
}

.off {
  background: red;
}

.button:hover {
  background-color: #3e8e41;
}

.button2:hover {
  background-color: #3e8e41;
}

</style>

JavaScript

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).toggleClass("off");
  });
});
</script>