JSFiddle - React, Tailwind, and code Playground

HTML

<div id="f1_container">
    <div id="f1_card" class="shadow">
        <div class="front face">
        <table class="cover" id="myTable" style="height: 281px; width: 450px;">
<tr>
<td colspan="2">organization</td>
</tr>

<tr>
<td>President:</td>
<td>president</td>
</tr>
<tr>
<td>Address:</td>
<td>address</td>
</tr>
<tr>
<td>Phone:</td>
<td>phone</td>
</tr>
<tr>
<td>Hours Open:</td>
<td>hours open</td>
</tr>
<tr>
  <td><input type="button" onclick="myFunction()" value="See Details"></td>
</tr>
</table>
           
        </div>
        <div class="back face center">
            Some text inside here
        </div>
    </div>
</div>

CSS

#f1_container {
	position: relative;
	margin: 10px auto;
	width: 450px;
	height: 281px;
	z-index: 1;
}
#f1_container {
	-webkit-perspective: 1000;
	perspective: 1000;
}
#f1_card {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 1.0s linear;
	transform-style: preserve-3d;
	transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	box-shadow: -5px 5px 5px #aaa;
}
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.face.back {
	display: block;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	box-sizing: border-box;
	color: white;
	text-align: center;
	background-color: #aaa;
}