JSFiddle - React, Tailwind, and code Playground

HTML

<table align="center" border="0">
  <tr>
    <td width="430" rowspan="3">    
        <div class="container">
            <div id="a1" class="card target"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="a5" class="card"></div>
            <div id="a6" class="card"></div>
            <div id="a7" class="card"></div>
            <div id="a8" class="card"></div>
            <div id="a9" class="card"></div>
            <div id="a10" class="card"></div>
            <div id="a11" class="card"></div>
            <div id="a12" class="card"></div>
            <div id="a13" class="card"></div>
            <div id="a14" class="card"></div>
            <div id="a15" class="card"></div>
            <div id="a16" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95" align="center" valign="middle">LOGO</td>
  </tr>
  <tr>
    <td height="148" valign="top">
    	<div class=scoreboard></div>
    </td>
  </tr>
  <tr>
    <td height="148" valign="bottom"><input id="clicky" type="button" value="Restart"/></td>
  </tr>
  <tr>
    <td height="59" align="center"><div id="msg"></div></td>
    <td>
    </td>
  </tr>
</table>

CSS

body{
    margin:0;
    padding:0;
	font-family: Arial;
	font-weight: bold;
}

#clicky {
	width: 100px;
	height: 40px;
    background-color: #F4F4F4;
    color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	font-weight: bold;
	margin-bottom: 20px;
}

.clicky {
	width: 100px;
	height: 40px;
    background-color: #F4F4F4;
    color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	font-weight: bold;
	margin-bottom: 20px;
}

.container{
    width:412px;
	height:412px;
}

.scoreboard{
	background-color: grey;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: #FFF;
    height:80px;
    width:160px;
	padding-left: 12px;
	padding-top: 17px;
}

.card{
    width:100px;
    height:100px;
    float:left;
    background-color:#ccc;
    margin-bottom:3px;
	margin-right:3px;
	position: relative;
}

.card:after {
    content:"";
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: lightgrey;
}

.card:hover:after {
	width:94px;
    height:94px;
	border:3px solid black;
	
}

.show.card:after{
	display:none;
	border: 0;	
}

.show:hover{
	width:94px;
    height:94px;
	border:3px solid black;
}

.lock{
	pointer-events:none;
}
.lock:hover{
	pointer-events:none;
}

.target{
	width:94px;
    height:94px;
	border:3px solid black;
}

JavaScript

var highscore = 0;
var rounds = 0;

var score = 0;
var pairs = 0;

function divs(){
    var colors = [
        "orange","orange","pink","pink","red","red","purple","purple",
        "blue","blue","green","green","brown","brown","yellow","yellow"];
    
    var divs = document.getElementsByClassName("card");
    
    while (divs.length > 0) {
        var i = Math.floor(Math.random() * colors.length);
        divs[0].style.backgroundColor = colors[i];
        colors.splice(i, 1);
        divs = [].slice.call(divs, 1);
    }
}

function restart(){
    if(score>highscore){
        highscore=score;		
    }
    pairs = 0;
    score = 0;
    rounds++
        $("div").removeClass("show lock");
    
    $('.scoreboard').html("Top score: " + highscore
                          + "<br>Current score: " + score
                          + "<br>Games played: " + rounds);
    divs();
}

divs();

$('.scoreboard').html("Top score: " + highscore
                      + "<br>Current score: " + score
                      + "<br>Games played: " + rounds);

var tar = "a1";
var loc = 1;
var pick1 = false;
var pick2 = false;
var id1;
var id2;

$(window).keydown(function(e) {
    
    switch (e.which) {
        case 37:
            if(tar == "a1" || tar == "a5" || tar == "a9" || tar == "a13"){
                $('#msg').html("Can't move left from here.");
            }else{
                $('#' + tar).removeClass("target");
                loc-=1;
                tar = ("a"+loc);
                $('#' + tar).addClass("target");
                $('#msg').html("Moved left.");
            }
            break;
            
        case 38:
            if(tar == "a1" || tar == "a2" || tar == "a3" || tar == "a4"){
                $('#msg').html("Can't move up from here.");
            }else{
                $('#' + tar).removeClass("target");
                loc-=4;
                tar = ("a"+loc);
                $('#' + tar).addClass("target");
                $('#msg').html("Moved up.");
 ...