JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.keyboard
		{
			display:table;
			width:500px;
			height:250px;
		}
		
		.keyboardRow
		{
			display:table-row;
			border:1px solid red;
			text-align: center;

		}
		
		.key
		{
			display:table-cell;
			border:1px solid black;
			text-align: center;
		}