JSFiddle - React, Tailwind, and code Playground

by sibin va

HTML

<div class='container'>
        <div class='card'>
            <div class='front'>
                <h1>Front</h1>
            </div>
           <div class='back'>
                <h1>Back</h1>
           </div>
        </div>
    </div>

CSS

h1{
        margin: 0;
        padding: 0;
      }
    .container{
        margin: auto;
        left: 34%;
        top: 20%;
        position: relative;
       
      }
    .card{
        text-align: center;
        width: 300px;
        height: 300px;
        position: absolute;
        text-align: center;
        line-height: 300px;
     
	    -webkit-transition: 0.6s;-webkit-transform-style:preserve-3d;
	
      }
     .card:hover{
        transform: rotateX(180deg);
      }
    .front,.back{
        border: 2px solid;
        border-radius: 25px;
        position: absolute;
        
        width: 100%;
        height: 100%;    
        backface-visibility: hidden;
        -webkit-backface-visibility:hidden;
              
    }
     .front{background: red; 	}
     .back{background: blue;	-webkit-transform: rotateX(180deg);}