JSFiddle - React, Tailwind, and code Playground

HTML

<table width="589" border="1">
  <tr>
    <td width="412" rowspan="2">    
        <div class="container">
            <div id="a1" class="card"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="b1" class="card"></div>
            <div id="b2" class="card"></div>
            <div id="b3" class="card"></div>
            <div id="b4" class="card"></div>
            <div id="c1" class="card"></div>
            <div id="c2" class="card"></div>
            <div id="c3" class="card"></div>
            <div id="c4" class="card"></div>
            <div id="d1" class="card"></div>
            <div id="d2" class="card"></div>
            <div id="d3" class="card"></div>
            <div id="d4" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95"></td>
  </tr>
  <tr>
    <td height="298" align="center" valign="top">
    	<div class=scoreboard>
        	
        	
        </div>
    </td>
  </tr>
  <tr>
    <td height="59">&nbsp;</td>
    <td align="center" valign="middle">
    </td>
  </tr>
</table>

CSS

body{
    margin:0;
    padding:0;
}


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

.scoreboard{
	width: 160px;
	height: 80px;
	background-color:grey;
	border-radius: 10px;
	-moz-border-radius: 10px;
}

.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;
	
	
}

JavaScript

var colors = [
    "orange","orange","pink","pink"];

    var highscore = 0;
	var rounds = 0;

	function round() {
		
		var score = 0;
		var pairs = 0;
			
		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);
		}
		
		
		var pick1 = false;
		var pick2 = false;
		var id1;
		var id2;
		
		$('.card').click(function(){
		
			if(pick1) {
				pick2 = $(this).css('background-color');
				id2 = $(this).attr('id');
				$(this).addClass("show")
				
				if(pick1 == pick2 && id1!=id2){
					alert('Correct');
					score += 100;
				}
				else {
					alert('Incorrect');
					$('#' + id1 + ', #' + id2).removeClass("show");
					score -= 10;
				}
			
				pick1 = false;
				pick2 = false;
			} else {
				pick1 = $(this).css('background-color');
				id1 = $(this).attr('id'); 
				$(this).addClass("show")
			}
		});
		
	}
	
	round();