JSFiddle - React, Tailwind, and code Playground

by cmd0

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<div><h2>Rehearsal Schedule Ballot</h2><p class="instructions">Click cells to vote: <span style="color:green;">yes</span>|<span style="color:red;">no</span>|<span style="color:yellow;">maybe</span></p><table style='border-color:white;'><caption> Last day to vote: Fri, Jan 18 2019<br></caption><tr><th data-col=0>13</th><th data-col=1>Jan 19, 2019 8:00 PM</th><th data-col=2>Jan 20, 2019 8:00 PM</th><th data-col=3>Jan 21, 2019 8:00 PM</th></tr><tr id=row-0><td data-row=0>[email protected]</td><td class='votes ' + id='cell-0' data-col='1' data-mid='1'><td class='votes ' + id='cell-1' data-col='2' data-mid='1'><td class='votes ' + id='cell-2' data-col='3' data-mid='1'></tr><tr id=row-1><td data-row=1>[email protected]</td><td class='votes ' + id='cell-3' data-col='1' data-mid='28'><td class='votes ' + id='cell-4' data-col='2' data-mid='28'><td class='votes ' + id='cell-5' data-col='3' data-mid='28'></tr><tr id=row-2><td data-row=2>[email protected]</td><td class='votes ' + id='cell-6' data-col='1' data-mid='31'><td class='votes ' + id='cell-7' data-col='2' data-mid='31'><td class='votes ' + id='cell-8' data-col='3' data-mid='31'></tr><tr id='totals-row'><td>Vote Count</td><td class='totalcell' id='totalcell-1'>0</td><td class='totalcell' id='totalcell-2'>0</td><td class='totalcell' id='totalcell-3'>0</td></tr></table></div>

CSS

/* added for rehearsalSchedule.php */

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid gray;
}
td, th { 
    padding: 10px;
}

.totalcell {
	text-align : center; !important
}