JSFiddle - React, Tailwind, and code Playground

HTML

<script>
  // Scripted By Adam Khoury in connection with the following video tutorial:
  // http://www.youtube.com/watch?v=c_ohDPWmsM0
  var memory_array = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E', 'F', 'F', 'G', 'G', 'H', 'H', 'I', 'I', 'J', 'J', 'K', 'K', 'L', 'L'];
  var memory_values = [];
  var memory_tile_ids = [];
  var tiles_flipped = 0;

  function memory_tile_shuffle(array) {
    var i = array.length,
      j, temp;
    while (--i > 0) {
      j = Math.floor(Math.random() * (i + 1));
      temp = array[j];
      array[j] = array[i];
      array[i] = temp;
    }
    return array;
  }

  /*We need a function which will generate the board for us. The value of each div element is set in memory_array[].*/
  function newBoard() {
    tiles_flipped = 0;
    var output = '';
    memory_array = memory_tile_shuffle(memory_array);
    console.log("memory_array " + memory_array);
    for (var i = 0; i < memory_array.length; i++) {
      output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>';
    }
    document.getElementById('memory_board').innerHTML = output;
    console.log(output);
  }

  function imageChange() {
    var divs = document.querySelectorAll("#memory_board > div");
    for (var i = 0; i < divs.length; i++) {
      divs[i].style.backgroundImage = "url('http://placehold.it/350x150/333333')";
    }
  }

  /*We need a function that will implement the turining of the flipping of the boards.*/
  function memoryFlipTile(tile, val) {
    //console.log(tile + ", " +val);
    if (tile.innerHTML == "" && memory_values.length < 2) {
      tile.style.background = '#FFF';
      tile.innerHTML = val;
      if (memory_values.length == 0) {
        memory_values.push(val);
        memory_tile_ids.push(tile.id);
      } else if (memory_values.length == 1) {
        memory_values.push(val);
        memory_tile_ids.push(tile.id);
        if (memory_values[0] == memory_values[1]) {
          tiles_flipped += 2;
   ...

CSS

<style type="text/css"> div#memory_board {
  background: #CCC;
  border: #999 1px solid;
  width: 800px;
  height: 540px;
  padding: 24px;
  margin: 0px auto;
}

div#memory_board > div {
  background: url('http://placehold.it/350x150/ffffff') no-repeat center;
  border: #000 1px solid;
  width: 71px;
  height: 71px;
  float: left;
  margin: 10px;
  padding: 20px;
  font-size: 50px;
  text-align: center;
}

</style>