JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
	<div class="col-xs-1 text-right">
		<div class="row-1">
			<div class = "triangle-up" id ="up1"></div>
		</div>
		<div class="row-1">
			<div class = "triangle-down" id ="down1"></div>
		</div>
	</div>
  <div class="col-xs-1">
    <div class = "col-centered">
			<input type="text" id="hora" size="5" maxlength="5">
    </div>
	</div>
  <div class="col-xs-1">
    	<div class="row-1">
      		<div class = "triangle-up" id ="up"></div>
       </div>
   <div class="row-1">
      	<div class = "triangle-down" id ="down"></div>
        </div>
    </div>
  </div>
</div>

CSS

.col-centered{
    float: none;
    margin: 0 auto;
}
.row-1{
	padding-top: 3px;
  	padding-right: 0px;
  	padding-bottom: 1px;
  	padding-left: 0px;
}
.triangle-up {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 8px solid #555;
}
.triangle-down {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 8px solid #555;
}