JSFiddle - React, Tailwind, and code Playground

by cmd0

HTML

"<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: Thu, Jan 17 2019<br></caption><tr><th data-col=0>BYOB</th><th data-col=1>Jan 17, 2019 8:53 PM</th><th data-col=2>Jan 19, 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=row-3><td data-row=3>[email protected]</td><td class='votes ' + id='cell-9' data-col='1' data-mid='43'><td class='votes ' + id='cell-10' data-col='2' data-mid='43'><td class='votes ' + id='cell-11' data-col='3' data-mid='43'></tr><tr id=row-4><td data-row=4>[email protected]</td><td class='votes ' + id='cell-12' data-col='1' data-mid='95'><td class='votes ' + id='cell-13' data-col='2' data-mid='95'><td class='votes ' + id='cell-14' data-col='3' data-mid='95'></tr><tr id=row-5><td data-row=5>[email protected]</td><td class='votes ' + id='cell-15' data-col='1' data-mid='97'><td class='votes ' + id='cell-16' data-col='2' data-mid='97'><td class='votes ' + id='cell-17' data-col='3' data-mid='97'></tr><tr id=row-6><td data-row=6>[email protected]</td><td class='votes ' + id='cell-18' data-col='1'...

CSS

table {
  border-collapse: collapse;
}

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

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

/*votes table cells colors indicate choice*/
.yes{background-color: green;}
.no{background-color: red;}
.maybe{background-color: yellow;}
.winner {
	color: orange; 
	font-weight:bold;
}
.instructions { font-size: 70%;}

.sideByside .ui-block-a {
    padding-right: 6px;
}
.sideByside .ui-block-b {
    padding-left: 6px;
}
caption { padding-bottom: .5em; }