JSFiddle - React, Tailwind, and code Playground

HTML

<div class="click panel circle">
	<div class="front">
		<h2>0</h2>
	</div>
	<div class="back">
		<h2>1</h2>
	</div>
</div>

CSS

.circle div {border-radius: 100px; }
	.circle div h2 {padding-top: 3.5em; text-align: center; }
	
    .panel {
		float: left;
		width: 200px;
		height: 200px;
		margin: 20px;
		position: relative;
		font-size: .8em;

	}
	
	.panel .front {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #f0f0f0;
		text-align: center;

		-webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
	}


	.panel .back {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 800;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.6);

		-webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
	}

	.panel.flip .back {
		z-index: 1000;
		background: #f0f0f0;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg);
        transform: rotateX(0deg) rotateY(0deg);
	}

	.click.flip .front {
		-webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
        transform: rotateX(180deg);
	}

	.click .back {
		cursor: pointer;
		-webkit-transform: rotateX(-180deg);
        -moz-transform: rotateX(-180deg);
        transform: rotateX(-180deg);
	}

	.click.flip .back {
		-webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
	}

JavaScript

var coin = document.getElementsByClassName('panel');

coin[0].onclick = function () {
    if (coin[0].className.indexOf('flip') > -1) {
        coin[0].className = 'click panel circle';
    } else {
        coin[0].className = coin[0].className + " flip";
    }
}