JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>

<table id="cardsTable">

<tr>
  
  <td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>
  
  <td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>
  
  <td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>
  
  <td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>

</tr>


<tr>

<td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>

<td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>

<td> <div class=card><div class=front>Front</div> <div class=back>Back</div> </div> </td>

</tr>
  

</table>


</body>
</html>

CSS

#cardsTable td {
	position: relative;
  min-width: 90px;
  min-height: 120px;
  border: 2px solid #333;
  background: #ddd;
}


.card {
	position: relative;
    width: 90px;
    height: 120px;
    
    
}

.front {
	width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
	background: orange;
    color: blue;
	font-size: 30px;
	backface-visibility: hidden;
  padding-top: 0px;
  transform: rotateY(180deg);
  transition: transform 1s;
}

.back {
	width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
	background: cyan;
    color: red;
	font-size: 30px;
	backface-visibility: hidden;
  padding-top: 0px;
  
  transition: transform 1s;
}


.card:hover .front {
  transform: rotateY(0deg);
  
  }


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

JavaScript

/*
* Tälläne kortin pyörittely
*/