JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="container">
        <div class="card">
            <div class="front">
                front
            </div>
            <div class="back">
                back
            </div>
        </div>
        </div>
    </li>
</ul>

CSS

li { 
  width: 300px;
  height: 260px;
  position: relative;
  perspective: 800px;
  list-style-type: none;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transition-duration: 400ms;
  transition-duration: 400ms;
}
.card div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg );
  transform: rotateY(180deg);
}
.card.flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

JavaScript

$(document.body).on('click', '.card', function() {
          console.log("CLICK");
    document.querySelector('.card').classList.toggle("flip");
  });