JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="container">
    <header>
      <h1>Matching cards game</h1>
    </header>
    <div id="card-table">
      <div id="set-of-cards">
        <div class="king card"></div>
        <div class="queen card"></div>
        <div class="king card"></div>
        <div class="queen card"></div>
      </div>
      <span id="gameover"></span>
      <br>
      <div id="buttons">
        <button type="button" id="start">New Game</button>
        <button type="button" id="reset">Reset</button>
      </div>
    </div>
    <footer>
    </footer>
  </div>
  <!--End of main container-->
  <script src="js/main.js"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</body>

CSS

/******************************************
/* SETUP                   
/*******************************************/


/* Box Model Hack */

* {
  -moz-box-sizing: border-box;
  /* Firexfox */
  -webkit-box-sizing: border-box;
  /* Safari/Chrome/iOS/Android */
  box-sizing: border-box;
  /* IE */
}


/* Clear fix hack */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clear {
  clear: both;
}

.alignright {
  float: right;
  padding: 0 0 10px 10px;
  /* note the padding around a right floated image */
}

.alignleft {
  float: left;
  padding: 0 10px 10px 0;
  /* note the padding around a left floated image */
}


/******************************************
/* BASE STYLES                   
/*******************************************/

body {
  color: #000;
  font-size: 12px;
  line-height: 1.4;
  font-family: Helvetica, Arial, sans-serif;
}


/******************************************
/* LAYOUT                   
/*******************************************/

button {
  margin: 0 15px 0 0;
}

header {
  text-align: center;
}

footer {
  padding: 20px 0 0 0;
  text-align: right;
}

.card {
  display: inline-block;
  width: 71px;
  height: 96px;
  margin: 20px;
  text-align: center;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/225758/back-of-card.png");
}

.king.selected {
  background: url("https://imageshack.com/i/plo8d5Spp");
}

.queen.selected {
  background: url("https://imageshack.com/i/plshwWpYp");
}

#buttons {
  margin: 20px;
}

#card-table {
  border: 2px solid black;
  margin: 0 auto;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  width: 70%;
}

#container {
  width: 960px;
  margin: auto;
}

#gameover {
  margin: 10px 0 10px 0;
}

JavaScript

var moves = 0; //number of moves
var cards;
var playerChoices = []; //put the player selections in an array for comparison purposes



$(document).ready(function() {

  $('#buttons').hide();
  cards = $('.card');

  $('.card').on('click', showCard);
  $('#start').on('click', newGame);
  $('#reset').on('click', resetGame);


  function showCard() {

    $(this).addClass('selected'); //mark the selection with the selected class

    playerChoices.push($(this)); //push the players choice onto the playerChoices array
    console.log(playerChoices);

    moves++;
    console.log(moves);

    $('#buttons').show();
    matchCards(playerChoices);

  }

  function matchCards(array) {

    if (playerChoices.length === 3) {
      //when the player finds the first match
      if (playerChoices[0].attr('class') === playerChoices[1].attr('class')) { //if both playerChoices have the class 
        console.log("match found at index 0 and 1 of playerchoice!");
        playerChoices.forEach(function(element) {
          element.addClass('matched');
        });
      }

      //Deselect the two choices that were made
      else {
        playerChoices.forEach(function(element) {
          element.removeClass('selected');
        })
        playerChoices = [];
      }
    } else if (playerChoices.length === 4) {

      //when the player gets the second match
      if (playerChoices[2].attr('class') === playerChoices[3].attr('class')) {
        console.log("match found at index 2 and 3 of playerchoice!");
        playerChoices.forEach(function(element) {
          element.addClass('matched');
        })
        showGameOverMessage();
      }

      //Deselect the last two choices that were made
      else {
        playerChoices.forEach(function(element) {
          element.removeClass('selected');
        })
      }
    }
  }

  function newGame() {
    resetGame();
  }

  function resetGame() { //Listener function
    $('.card').siblings().removeClass('selected matched');
   ...