JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8">
	<title>Gwent Memory Test</title>
	<meta name="description" content="JS Memory Game inspired by Gwent">
	<meta name="keywords" content="javascript, jQuery, game, gwent, memory">
	<meta name="author" content="MZ">
	
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
	
	<link rel="stylesheet" href="main.css">

	<link href="https://fonts.googleapis.com/css?family=Lobster&amp;subset=latin-ext" rel="stylesheet">
	
	<!--[if lt IE 9]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->

</head>

	<header>
		<h1>Gwent Memory test</h1>
		<p>Inspired by <a href="https://www.playgwent.com/pl" target="_blank">Gwent - The witcher Card Game</a></p>
	</header>
	<main>
		<article>
			<div class="board">
			
				<div class="card" id="c0"></div>
				<div class="card" id="c1"></div>
				<div class="card" id="c2"></div>
				<div class="card" id="c3"></div>
				
				<div class="card" id="c4"></div>
				<div class="card" id="c5"></div>
				<div class="card" id="c6"></div>
				<div class="card" id="c7"></div>
				
				<div class="card" id="c8"></div>
				<div class="card" id="c9"></div>
				<div class="card" id="c10"></div>
				<div class="card" id="c11"></div>
				
			
				<div class="score">Turn counter: 0</div>
				<div class="reset">Reset</div>
				
			</div>
		</article>
	</main>
<body>

	
	<script src="jquery-3.3.1.min.js"></script>
	<script src="memory.js"></script>
	
</body>
</html>

CSS

body
{
	margin: 0;
	background-color: #26282E;
	color: #209781;
    font-family: 'Lobster', sans-serif;
    font-size: 28px;
}

a:link    { color: #209781; text-decoration: none; }
a:visited { color: #209781; }
a:active  { color: #209781; }
a:hover   { color: #E9B64A; }

h1 
{
	font-size: 64px;
	font-weight: 400;
	text-align: center;
	letter-spacing: 5px;
	margin-top: 20px;
	margin-bottom: 0px
	
}
p
{
	text-align: center;
	margin-top: 5px;
	margin-bottom: 25px;
	letter-spacing:2px;
}
.board
{
	width:600px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.card
{
	width:125px;
	height:125px;
	display: inline-block;
	margin: 3px;
	background-image: url("img/karta.png");
	border:4px solid #51c8b2;
	border-radius: 4px;
	cursor:pointer;
	filter: brightness(70%);
	transition: all .3s ease-in-out;
}
.card:hover
{
	border: 4px solid #e9b64a;
	filter:brightness(100%);
}
.cardA
{
	width:125px;
	height:125px;
	display: inline-block;
	margin: 3px;
	background-image: url("img/karta.png");
	border:4px solid #e9b64a;
	border-radius: 4px;
	cursor:default;
	filter: brightness(100%);
	transition: all .3s ease-in-out;
}
.score
{
	margin-top: 5px;
	letter-spacing: 2px;
}
.reset:hover, resetButton
{
	cursor:pointer;
	color: e9b64a
}

JavaScript

/*
refaktoryzacja kodu
- losowanie położenia awatarów zrobione
- skrócić zapis pobierania kart getElementById
- zresetowanie stanu planszy (zrobione częściowo)
- czy wszystie karty można opakowa w jeden obiekt Jquery
*/


var preRandCards = ["ciri.png", "geralt.png", "jaskier.png", "jaskier.png", "triss.png", "geralt.png", "yen.png", "ciri.png", "triss.png", "yen.png", "iorweth.png", "iorweth.png"];

var cards = [];
randCards();
//alert(cards[4]);



//console.log(cards);
var cardsList = $('.board div:not(.score, .reset)');



/* var c0 = cardsList[0];
var c1 = cardsList[1];
var c2 = cardsList[2];
var c3 = cardsList[3];

var c4 = cardsList[4];
var c5 = cardsList[5];
var c6 = cardsList[6];
var c7 = cardsList[7];

var c8 = cardsList[8];
var c9 = cardsList[9];
var c10 = cardsList[10];
var c11 = cardsList[11];
*/

var reset = $('.reset')[0];
var restoreButton = '<div class="resetButton">Play again</div>';
var main = $('main')[0];
var bodyBoard = main.innerHTML;
var num = []

reset.addEventListener("click", function() { resetBoard(); } );
//pętla do tworzenie nasłuchiwaczy dla talii kart
for (var i = 0; i < cardsList.length; i++)
{

	cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

//restoreBoard();
/*
c0.addEventListener("click", function() { revealCard(0); } );
c1.addEventListener("click", function() { revealCard(1); } );
c2.addEventListener("click", function() { revealCard(2); } );
c3.addEventListener("click", function() { revealCard(3); } );

c4.addEventListener("click", function() { revealCard(4); } );
c5.addEventListener("click", function() { revealCard(5); } );
c6.addEventListener("click", function() { revealCard(6); } );
c7.addEventListener("click", function() { revealCard(7); } );

c8.addEventListener("click", function() { revealCard(8); } );
c9.addEventListener("click", function() { revealCard(9); } );
c10.addEventListener("click", function() { revealCard(10); } );
c11.addEventListener("click", function() { revealCard(11); }...