JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false -->

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<div class="col-md-3 cardContainer">
                  <div class="card red">
                    <div class="front"><h3 class="cardTitle">Flip me!</h3></div>
                    <div class="back">
                      <div class="content">
                        <h3 class="cardTitle">Back side</h3>
                        <br/>
                        <p id="happy"></p>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="col-md-3 cardContainer">
                  <div class="card2 red">
                    <div class="front"><h3 class="cardTitle">Flip me!</h3></div>
                    <div class="back">
                      <div class="content">
                        <h3 class="cardTitle">Back side</h3>
                        <br/>
                        <p id="happy"></p>
                      </div>
                    </div>
                  </div>
                </div>

<br>
     <button id="rotate" type="button">Rotate card</button>
     <button id="rotate2" type="button">Rotate card</button>

CSS

.animation {
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }

    .cardContainer 
    {
     
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -ms-transition: all .3s ease;
      transition: all .3s ease;

      
      /*depth of the elements */
      -webkit-perspective: 800px;
      -moz-perspective: 800px;
      -o-perspective: 800px;
      perspective: 800px;

      /*border: 1px solid #ff0000;*/
      padding-left: 1%;
    }


    .card 
    {
      width: 99%;
      height: 200px;
      cursor: pointer;
      
      /*transition effects */
      -webkit-transition: -webkit-transform 0.6s;
      -moz-transition: -moz-transform 0.6s;
      -o-transition: -o-transform 0.6s;
      transition: transform 0.6s;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }
    
    .card2
    {
      width: 99%;
      height: 200px;
      cursor: pointer;
      
      /*transition effects */
      -webkit-transition: -webkit-transform 0.6s;
      -moz-transition: -moz-transform 0.6s;
      -o-transition: -o-transform 0.6s;
      transition: transform 0.6s;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    .card.flipped 
    {
      -webkit-transform: rotateY( 180deg );
      -moz-transform: rotateY( 180deg );
      -o-transform: rotateY( 180deg );
      transform: rotateY( 180deg );
    }
    .card.flipped:
    { 
    }

    .card .front,
    .card .back {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 60px;
      color: white;
      text-align: center;
      font-size: 4em;
      position: absolute;
      -webkit-backface-visibility:...

JavaScript

$('#rotate').click(function(){
              $(".card").toggleClass('flipped');
            });
            
$('#rotate2').click(function(){
              $(".card2").toggleClass('flipped');
            });