JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container " ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
            <div class = "flipstyle">
			front
            </div>
		</div>
		<div class="back">
             <div class = "flipstyle">
			 CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.            </div>
		</div>
	</div>

</div>
<div class="icon-container">
   icon
</div>

CSS

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
     position:absolute;
    
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	min-width: 320px;
	height: 100%;
   position: relative;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	
 
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
    	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

.flipstyle{
  border-radius: 6px;
  border-color:  #61AE24;
  border-style: solid;
  border-width: 1em;
  background-color:white;
  min-height:50px;    
}

.icon-container{
   position:absolute; 
}