JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viewport" class="linearlayout vertical" data-am-control="vertical-layout" >	
		<!-- El div "container_buttons" estaría centrado en el medio del padre -->		
		<button id="twitter" class="btn item" data-am-control="button" >Twitter dinámico</button>
		<button id="spinnerSimple" class="btn item" data-am-control="button" >Spinner simple</button>
		<button id="spinnerCustom" class="btn item" data-am-control="button" >Spinner personalizado</button>
	</div><!-- END VIEWPORT-->

CSS

#viewport{
	width: 480px;
	height: 800px;
	background-image: linear-gradient(#a8a8a8, #ebebeb);
	margin: 0 auto;
}

.linearlayout {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.vertical {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}