JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
	<div class="section">
    	<section class="card-container">
			<div class="row center-block">	
				<div class="col-xs-push-2 col-xs-8 text-center">	
            		<div class="item-circled col-xs-4">
						<div class="face-container">
							<div class="face-card">
								<div class="face-1">
									<div class="text-center" style="background-color: #f7eebe;font-size: 300%;width: 100%;height: 100%">
									<span class="centered">front</span>
									</div>
								</div>
								<div class="face-1 back">
									<p class="centered">back</p>
								</div>
							</div> <!-- face-card -->
        				</div> <!-- face-container -->
    				</div> <!-- col-xs-4 -->
   				</div> <!-- col-xs-8 -->
   			</div> <!-- row -->
		</section> <!-- card-conteiner -->
	</div> <!-- section -->
</div> <!-- container-fluid -->

CSS

.section {
    position: relative;
    padding: 80px 0;
}


.card-container {
    position: relative;
    margin: 0 auto;
}    


.card-container:after {
    clear: both;
}


.item-circled {
	background-color: transparent;
	text-align: center;
	position: relative;
	width: 100%;
	display: inline-block;
}

.face-container {
	position: relative;
	width: 210px;
	height: 210px;
	z-index: 1;
	-webkit-perspective: 1000px;
	perspective: 1000px;
}

.face-card {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: all .5s linear;
	transition: all .5s linear;
}

.face-container:hover .face-card {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.face-1 {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	overflow: hidden;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.face-1.back {
	display: block;
	box-sizing: border-box;
	color: white;
	font-size: 13px;
	text-align: center;
	background-color: #aaa;
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-border-radius: 50%;
	border-radius: 50%;
}


.centered{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}