JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">
<!-- flip div -->

<div class="flip-card">
<div id="flip" class="flip-card-inner">
  
<div class="flip-card-front">
<h1>The Front</h1> 
<p>Why did the chicken</p> 
<p>cross the road?</p>
<div class="box" onclick="flip();">Click Me!</div>
</div>

<div class="flip-card-back">
<h1>The Back</h1> 
<div class="box" onclick="flip();">Box</div>
</div>

</div>
</div>

</div>

CSS

/* flip css */

body {
  font-family: Arial, Helvetica, sans-serif;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feccb1+0,f17432+50,ea5507+51,fb955e+100;Red+Gloss+%232 */
background: #feccb1; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #feccb1 0%, #f17432 50%, #ea5507 51%, #fb955e 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.container {max-width:500px;margin:auto;}

.flip-card {
  background-color: transparent;
  perspective: 1000px;


}

.flip-card-inner {
  position: relative;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */

}

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
 
}

.flip-card-front {
  color: black;
}

.flip-card-back {
  color: black;
  transform: rotateY(180deg);
}

.box {width: 100%;height:40px;background-color: #999999;margin:auto;  cursor:pointer;}

JavaScript

/* flip div java */

function id(x) {var y = document.getElementById(x);return y;}

function flip() {
var flip = id('flip');
setTimeout(function(){ 
if (flip.className == "flip-card-inner") {flip.className = "flip-card-inner fopen";}
else {flip.className = "flip-card-inner";}
}, 500);
}