JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ubhape2-redesign.businesscatalyst.com/stylesheets/1140.css">
<link rel="stylesheet" href="http://ubhape2-redesign.businesscatalyst.com/stylesheets/base.css">
<link rel="stylesheet" href="http://ubhape2-redesign.businesscatalyst.com/stylesheets/layout.css">
<link rel="stylesheet" href="http://ubhape2-redesign.businesscatalyst.com/stylesheets/animate.css">
<script src="http://ubhape2-redesign.businesscatalyst.com/jscript/easing.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="flip-container">
  	  <div class="flipper">
        <div class="face front">
            <p>Front</p>
        </div>
        <div class="face back">
            <p>Back</p>
        </div>
    </div>
</div>

<button class="click">Click me</button>

CSS

.flip-container {
    height: 150px;
    width: 150px;
    
    perspective: 600;
    position: relative;
}
.flipper {
    height: 100%;
    width: 100%;
    
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.back, .front {
    height: 100%;
    width: 100%;
    
    display: block;
    position: absolute;
    backface-visibility: hidden;
}
.front {
    background-color: red;
}
.back {
    background-color: blue;
    transform: rotateY(180deg);
}
.flipped {
    animation: spin180 1s 1 forwards;
}
.second-flip {
    animation: spin360 1s 1 forwards;
}

@keyframes spin180 {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

@keyframes spin360 {
    0% { transform: rotateY(180deg); }
    100% { transform: rotateY(360deg); }
}

JavaScript

$(".click").click(function () {
    $flipper = $(".flipper");
    
    if (!$flipper.hasClass("flipped") && !$flipper.hasClass("second-flip")) {
        $flipper.addClass("flipped");
    } else {
        $flipper.toggleClass("flipped");
        $flipper.toggleClass("second-flip");
    }
});