JSFiddle - React, Tailwind, and code Playground
by Emre Erkan
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col">
<label for="level">BG Level</label>
</div>
<div class="col">
<input type="number" class="form-control" id="level" value="15" />
</div>
<div class="col">
<label for="boost">Molly's Boost</label>
</div>
<div class="col">
<input type="number" class="form-control" id="boost" value="43" />
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Happy</th>
<th scope="col">Moo</th>
<th scope="col">Ian</th>
<th scope="col">Pete</th>
<th scope="col">AD</th>
</tr>
</thead>
<tbody>
<tr class="happy happy987">
<th>Happy</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="moo moomuncher">
<th>Moo</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="ian ianbraun">
<th>Ian</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="pete sirpete sir-pete">
<th>Pete</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="ad adparker">
<th>AD</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="molly...
CSS
.row {
margin-top: 20px;
margin-bottom: 20px;
}
JavaScript
var BG =...