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"></div>
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
     <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td">d</div>
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
</div>   


<button id="randme">randomness</button>

CSS

.ws-css-table {
    display: table;
	border:1px solid #000;
	margin: auto;
	vertical-align: middle
}
.ws-css-table-tr { 
    display: table-row;   
 
}
.ws-css-table-td { 
    display: table-cell;
    border:1px solid #000;
    width: 10px;
    height:10px;
    text-align:center;
    vertical-align:middle;
	margin: 0;
	padding:0;
	font-size:8px;
}

JavaScript

$('#randme').click(function(){
 $('.ws-css-table-td').each(function ()
    {
   var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";  
 $(this).html(possible.charAt(Math.floor(Math.random() * possible.length)));
});
  

});