JSFiddle - React, Tailwind, and code Playground
HTML
<div class="coin"></div>
<div class="instructions">click to flip</div>
CSS
body {
padding-top: 20px;
}
.coin{
display: block;
background: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
background-size: 100% 100%;
width: 100px;
height: 100px;
margin: auto;
border-radius: 100%;
transition: all 500ms linear;
}
.flip {
transform: rotateY(180deg);
}
.instructions {
display: flex;
justify-content: center;
margin-top: 10px;
}
JavaScript
$('.coin').click(function() {
$(this).toggleClass('flip');
});