JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!doctype html>


    <title>Button Show</title>

  <body>
   
<body>
   <div class="vertical-center">
    <button id="show" type="button" class="btn btn-primary">Click Me!</button> 
    <button id="hide" type="button" class="btn btn-primary">Hide Me Now!</button> 

    <div id="one" class="box">1</div>
    <div id="two" class="box">2</div>
    <div id="three" class="box">3</div>
    </div>
    <script src="javascript.js"></script>  
  </body>
</html>

CSS

html,
body {
    height:100%;
    width:100%;
}
.vertical-center {
    text-align:center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
} 
.box {
    margin: 3px;
    width: 80px;
    display: none;
    height: 80px;
    float: left;
  }
  #one {
    background: #f00;
  }
  #two {
    background: #0f0;
  }
  #three {
    background: #00f;
  }

JavaScript

$(document).ready(function (){
	$('#show').click(function(){
		$( "div:hidden:first" ).fadeIn( "slow" );
	});
	$('#hide').click(function(){
		$( "div" ).fadeOut("fast");
	});
});