JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

CSS

* {
  box-sizing: border-box;
}

JavaScript

document.body.style.cssText = `width: 100vw;
                            height: 100vh;
                            margin: 0;
                            display: flex;
                            align-items: center;
                            justify-content: center;`
                            
class MemoryCard {
    constructor(items){
        this.numberOfItems = items;
        this.wrap = document.createElement('section');
        this.style = document.createElement('style');
        this.style.innerHTML = '.active { color: #000!important; } div.open { color: #000!important; }';
        this.text = null;
    }
    startGame(items){
        this.createGameArea();
        this.createGameItems(items);
        this.wrap.append(this.style);  
    }
    createGameArea(){
        this.wrap.style.cssText = `width: 500px;
                            height: 500px;
                            display: flex;
                            box-sizing: content-box;
                            justify-content: center;
                            align-items: center;
                            flex-wrap: wrap;
                            border: 1px solid #ccc;
                            `;
                            this.wrap.id = 'zz'
        document.body.append(this.wrap);
        document.addEventListener("click", (event)=>{this.showElement(event)});  
    }
    createGameItems(num){ 
        let z = Math.sqrt(num); 
        let z1 = Math.floor(z);
        let items = z1*z1;
        let y = Math.floor(items/2)
        let mas = [];
        for (let i = 0; i < y; i++) {
            mas.push(parseInt( Math.random()*100 ));
        }
        for (let i = 0; i < items; i++) {
            let gameItem = document.createElement('div');
            let r = this.setElementSize(items);
            gameItem.style.cssText = `width: ${r}px;
                            height: ${r}px;
                            display: flex;
                            justify-content:...