JSFiddle - React, Tailwind, and code Playground

by AlexGun

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>Document</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="app.js"></script>
</head>
<body>
  <div class="container">  
    <h3>Score:<span id="result">0</span></h3>

    <div class="grid">
    </div>
  </div>

</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 50px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  max-width: 100vw;
  max-height: 100vh;
  width: fit-content;
  height: fit-content;
  perspective: 1000px;
}

.wrap_card {
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
  margin: 10px;
  cursor:pointer;
}

.wrap_card, .front, .back {
  width: 200px;
  height: 150px;
  border-radius:20px;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  z-index: 2;
}

.back {
  transform: rotateY(180deg);
 }

.rotated {
  transform: rotateY(180deg);
}

.choiced {
  opacity: .1;
  cursor:default;

}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
  //card options
  let cardArray = [
    {
      name: 'lion',
      src: 'https://images.unsplash.com/photo-1546182990-dffeafbe841d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1159&q=80'
    },
    {
      name: 'turtle',
      src: 'https://images.unsplash.com/photo-1437622368342-7a3d73a34c8f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1228&q=80'
    },
    {
      name:'rabbit',
      src:'https://images.unsplash.com/photo-1452857297128-d9c29adba80b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
    },
    {
      name:'monkey',
      src:'https://images.unsplash.com/photo-1540573133985-87b6da6d54a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80',
    },
    {
      name:'rhino',
      src:'https://images.unsplash.com/photo-1463501810073-6e31c827a9bc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
    },
    {
      name:'horse',
      src:'https://images.unsplash.com/photo-1517326451550-8612522c096e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
    },
    {
      name:'cat',
      src:'https://images.unsplash.com/photo-1465635290539-cac59213cba3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
    },
    {
      name:'fox',
      src:'https://images.unsplash.com/photo-1480472684115-4966367dde1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1172&q=80',
    },
    {
      name:'dog',
      src:'https://images.unsplash.com/photo-1524511751214-b0a384dd9afe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1074&q=80',
    },
    {
      name:'pig',
     ...