JSFiddle - React, Tailwind, and code Playground
HTML
<div id="field">
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
<div class="card-boxes"><div class="cards"></div></div>
</div>
CSS
#field {
width: 600px;
margin: 50px auto;
}
.card-boxes {
border-radius: 3px;
float: left;
height: 100px;
margin: 3px;
width: 100px;
}
.cards {
border-radius: 3px;
font: 60px bold "Arial";
height: 90px;
padding-top: 10px;
text-align: center;
width: 100px;
}
JavaScript
var letters = [ "A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F", "G", "G", "H", "H", "I", "I", "J", "J" ],
cards = document.getElementsByClassName( "cards" ),
cardBoxes = document.getElementsByClassName( "card-boxes" );
var i = letters.length, j, temp;
while ( --i ) {
j = Math.floor( Math.random() * (i - 1) );
temp = letters[i];
letters[i] = letters[j];
letters[j] = temp;
}
for ( var i = cards.length; i--; ) {
cards[i].innerHTML = letters.shift();
}