JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="style.css">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<title>School Calendar</title>

<body>
    <div class="flip-container">
        <div class="flipper blurred-bg tinted">
            <div class="front">
                <div class="jumbotron" id="card">
                    <h1>FRONT</h1>

                    <div class="text-center">
                        <a onclick="test()" id="validate" href="#" class="btn btn-lg btn-info btn-block" role="button" aria-disabled="true">FLIP</a>
                    </div>

                    <script>
                        function test() {
                            var sheet = window.document.styleSheets[0]

                            //sheet.insertRule('.flip-container .flipper{animation-name: test; animation-duration: 1.5s; animation-delay: 0.1s;}', sheet.cssRules.length);
                            sheet.insertRule('.flip-container .flipper{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);}', sheet.cssRules.length);

                      ...

CSS

.container {
  width:       500px;
  height:      260px;
  position:    relative;
  perspective: 800px;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective:    1000;
  -o-perspective:      1000;
  perspective:         1000;

  height: 100px;
}

.flip-container, .front, .back {
  margin: 0 auto;
	width:  500px;
	height: 427px;
}

.flipper{
  margin-top: 50px;
  height:     325px;

	-webkit-transition:      0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition:         0.6s;
	-moz-transform-style:    preserve-3d;
  -o-transition:           0.6s;
	-o-transform-style:      preserve-3d;

	transition:              1.5s;
	transform-style:         preserve-3d;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
  -o-backface-visibility:      hidden;
	backface-visibility:         hidden;
	position:                    absolute;
	top:                         0;
	left:                        0;
}

.front {
	z-index: 2;
}

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

@keyframes test {
    100%
    {
      -webkit-transform: rotateY(-180deg);
      -moz-transform:    rotateY(-180deg);
      -o-transform:      rotateY(-180deg);
      transform:         rotateY(-180deg);
      -webkit-transform: rotateY(-180deg);
    }
}

/*
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
*/