JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
      <div class="outer"><div class="inner">O</div></div>
  </div>

CSS

#container{
	width: 250px;
	height: 250px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between;
	margin: 25px 0;
	background-color: #7CC7EE;
}

.outer{
  position: relative;
	width: 31%;
	height:31%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	background-color: #000C1C;
}

.inner{
	height: 80%;
	width: 80%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	font-family: Arial;
	font-size: 5em;
	font-weight: bolder;
	color: #7CC7EE;
    -ms-perspective: 800px;
	-webkit-perspective: 800px;
    perspective: 800px;
	-ms-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-ms-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.flip{
	-ms-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

JavaScript

var outerDivs = document.getElementsByClassName("outer");
var innerDivs = document.getElementsByClassName("inner");


for(var i=0; i < outerDivs.length; i++)
{
		outerDivs[i].firstElementChild.addEventListener("click", function(){this.classList.add("flip");});
    
   outerDivs[i].firstElementChild.addEventListener("transitionend", function(){this.classList.remove("flip");});
}