JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<style> 

</style>
</head>
<body>


<div class=card>
<div class=front>Front</div>
<div class=back>Back</div>
</div>

</body>
</html>

CSS

.card {
	position: absolute;
    width: 100px;
    height: 200px;
    left: 50px;
    top: 30px;
	
    
}

.front {
	width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
	background: cyan;
    color: blue;
	font-size: 30px;
	backface-visibility: hidden;
    animation-name: flipFront;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    padding-top: 50px;
}

.back {
	width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    text-align: center;
	background: cyan;
    color: red;
	font-size: 30px;
	backface-visibility: hidden;
    animation-name: flipBack;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    padding-top: 50px;
}

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

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

JavaScript

/*
* Tälläne kortin pyörittely
*/