JSFiddle - React, Tailwind, and code Playground

by shurikation

HTML

<div class="card">
  <div class="cardInner">
    <div class="cardFront">React</div>
    <div class="cardBack">tcaeR</div>
  </div>
</div>

CSS

.card {
  font-size: 18px;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
  perspective: 1000px;
  height: 33px;
  width: 170px;
  margin-right: 11px;
}

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

.cardInner {
  position: relative;
  background-color: transparent;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.cardFront,
.cardBack,
.cardHZ {
  position: absolute;
  width: 100%;
  height: 100%;
/*   -webkit-backface-visibility: hidden;
  backface-visibility: hidden; */
  padding: 6px 12px;
}

.cardFront {
  background-color: lightblue;
  color: black;
}

.cardBack {
  background-color: #1BB95E;
  color: white;
  transform: rotateY(180deg);
}