JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
			<div>Rushikesh</div>
			<div>Jogle</div>
		</div>
	</div>
        
    <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
			<div>Rushikesh</div>
			<div>Jogle</div>
		</div>
	</div>
        
    <div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
			<div>Rushikesh</div>
			<div>Jogle</div>
		</div>
	</div>
</section>

CSS

section {
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}

.flip-container {
    position: relative;
    display: inline-block;
    margin-left: 50px;
}

.flip-container > div > div {
    background: red;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.flip-container .flipper {
    transform-origin: 50px 100%;
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}
.vertical.flip-container .flipper {
    transform-origin: 100% 50px;
}

.flip-container > div > div + div {
    background: green;
    transform: rotateX(180deg) scaleX(-1) scaleY(-1);
}
.vertical.flip-container > div > div + div {
    transform: rotateX(180deg);
}


/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.vertical.flip-container:hover .flipper,
.vertical.flip-container.hover .flipper{
    transform: rotateX(180deg);
}

.flip-container,
.flip-container > div > div {
    width: 100px;
    height: 100px;
}

JavaScript

var $flippers = $(".flip-container"),
    qtFlippers = $flippers.length;

setInterval(function () {
    $flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 4000);