JSFiddle - React, Tailwind, and code Playground

by blueberrymuffin

HTML

<div class="ws-css-table">
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">A</div>
        <div class="ws-css-table-td">B</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">C</div>
        <div class="ws-css-table-td">D</div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">E</div>
        <div class="ws-css-table-td">F</div>
    </div>
</div>

    </br>
<input type="checkbox" id="blacktext">Black Text

CSS

.ws-css-table {
    display: table;
}
.ws-css-table-tr {
    display: table-row;
}
.ws-css-table-td {
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
    vertical-align:middle;
}


.blackcolor {
  color: #000!important
}

JavaScript

var colors = ['red', 'blue', 'purple', 'green'];

$(document).ready(function () {
  $('.ws-css-table-td').each(function ()
 {      
  var theColor = colors[Math.floor(Math.random() * colors.length)];
    $(this).css('color', theColor);
});
    });


$('#blacktext').click(function() {

   $('.ws-css-table-td').toggleClass('blackcolor');

 })