JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div class="maindocu">
			<div class="keyboard">
			    <div class="first_row">
			    	<div class="key">Q</div>
			    	<div class="key">W</div>
			    	<div class="key">E</div>
			    	<div class="key">R</div>
			    	<div class="key">T</div>
			    	<div class="key">Y</div>
			    	<div class="key">U</div>
			    	<div class="key">I</div>
			    	<div class="key">O</div>
			    	<div class="key">P</div>
			    </div>
			    <div class="second_row">
			    	<div class="key">A</div>
			    	<div class="key">S</div>
			    	<div class="key">D</div>
			    	<div class="key">F</div>
			    	<div class="key">G</div>
			    	<div class="key">H</div>
			    	<div class="key">J</div>
			    	<div class="key">K</div>
			    	<div class="key">L</div>
			    </div>
			    <div class="third_row">
			    	<div class="key">Z</div>
			    	<div class="key">X</div>
			    	<div class="key">C</div>
			    	<div class="key">V</div>
			    	<div class="key">B</div>
			    	<div class="key">N</div>
			    	<div class="key">M</div>
			    </div>
		 	</div>
		</div>
	</body>

CSS

.maindocu{
	min-height: 100%;
}
.keyboard{
	display: block;
	border-spacing: 5px;
	margin: auto;
	position: relative;
	vertical-align: middle;
}

.first_row{
	display: block;
	margin: auto;
	width: 550px;
}

.second_row{
	display: block;
	margin: auto;
	width: 490px;
}

.third_row{
	display: block;
	margin: auto;
	width: 440px;
}

.key{
	display: table-cell;
	width: 50px;
    height: 50px;
    border-spacing: 5px;
    text-align: center;
    vertical-align: middle;
    font-family: "Verdana";
    font-size: 100%;
    color: #ffffff;
    background: #000;
    border: 5px solid #808080;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

}