JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 

<div class ='circleBase' id='rotateMode'>

 
 <button id="up" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-up"></span></button>

<button id="left" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-left"></span></button>

 <button id="right" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-right"></span></button>

 
<button id="down" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-arrow-down"></span></button>

</div>

CSS

#rotateMode{
  border-radius: 50%;
  width: 125px;
  height: 125px;
  background-color: gray;
  color:white;
  position:absolute;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  align-content:center;
 
}

#left{
 
}

#right{
 

}

#up{
	 margin:0 100px;
}

#down{
	 margin:0 100px;
}