JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>
    <script src="app.js"></script>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div class="row">
        <div data-coulour="red" class="card red colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="orange" class="card orange colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="blue" class="card blue colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="pink" class="card pink colour-hidden" onclick="onCardClicked(event)"></div>

    </div>

    <div class="row">

        <div data-coulour="red" class="card red colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="cyan" class="card cyan colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="green" class="card green colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="pink" class="card pink colour-hidden" onclick="onCardClicked(event)"></div>

    </div>

    <div class="row">

        <div data-coulour="cyan" class="card cyan colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="orange" class="card orange colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="yellow" class="card yellow colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="blue" class="card blue colour-hidden" onclick="onCardClicked(event)"></div>

    </div>

    <div class="row">

        <div data-coulour="purple" class="card purple colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="purple" class="card purple colour-hidden" onclick="onCardClicked(event)"></div>
        <div data-coulour="yellow" class="card yellow colour-hidden"...

CSS

.row {
    text-align: center;


}

.card {
    display: inline-block;
    width: 150px;
    height: 150px;
    background-color: aliceblue;
    cursor: pointer;
}

.card.done {
    cursor: default;
}

.card.done:hover {
    cursor: default;
    box-shadow: none;
}

.card:hover {

     
    box-shadow: inset 0px 0px 0px 1px red;
    box-sizing: border-box;
}


.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.pink {
    background-color: magenta;
}

.cyan {
    background-color: cyan;
}

.green {
    background-color: green;
}

.purple {
    background-color: purple;
}

.orange {
    background-color: orange;
}

.yellow {
    background-color: yellow;
}

.colour-hidden {
    background-color: papayawhip;
}

.match-found {
    background-color: black;
}

.gagne{
    position:absolute;
    width: 100%;
    height: 100%;
    background-color: rgba( 0, 0, 0, 0.7);
    color: white;
    top:0;
    left:0;
    font-size: 50px;
    text-align: center;
    padding-top: 40%;
    display: none;
}

JavaScript

var card1 = [];
 var combos = 0;
// fonction pour cliquer sur les cartes, pour verifier si on a trouver une pair ou non en utilisant des condtions if

 function onCardClicked(e) {
     const target = e.currentTarget;
     console.log(target.className.split(" "));
     target.className = target.className
         .replace('colour-hidden', '')
         .trim();

     card1.push(e.target);
// verifie quil y a 2 cartes quon a cliquer dessus
     if (card1.length === 2) {
// verifie si les deux cartes sont la meme couleur en verifiant la couleur dans la classname en utilisant une split pour verifier le 2ieme mot qui indentifie la coloueur
         if (card1[0].className.split(" ")[1] === card1[1].className.split(" ")[1]) {
// si les deux couleurs sont la meme on ajoute +1 au combos
             combos++;
            //  mets un timeout avant que les cartes devient noir lorsquon trouve une pair
             setTimeout(() => {

                 console.log(card1);
                 card1[0].className += (" match-found");
                 card1[1].className += (" match-found");
                //  vide le array pour quon peut choisir 2 nouvelles cartes
                 card1 = [];

                //  verfie si combos est agele a 8 por voir si tu as gagner

                 if (combos == 8) {
                    //  sort element pour annoncer que tu a gagner par utilisant le class .gagne
                      document.getElementById("win").style.display="block";
                 }
             }, 200);

// le else pour quand les cartes sont pas la meme couleur et retourne la meme couleur quavant avec le meme timeout
         } else {
             setTimeout(() => {
                 card1[0].className += (" colour-hidden");
                 card1[1].className += (" colour-hidden");
                 console.log("not a match");
                 card1 = [];
             }, 200);
         }

     }



 }