JSFiddle - React, Tailwind, and code Playground

HTML

<div class="kbd">
  <span class="key">Q</span>
  <span class="key">W</span>
  <span class="key">E</span>
	<br/>&nbsp;&nbsp;&nbsp;&nbsp;
  <span class="key">A</span>
  <span class="key">S</span>
  <span class="key">D</span>
</div>

CSS

.kbd{margin:4em;}

.key{
	margin: .65em .45em;
	cursor:pointer;
	display: inline-block;
	font: normal 2em sans-serif;
	color: #444;
	text-shadow: 0 0 2px grey;
	width: 1.25em;
	height: 1.25em;
	padding: 1em .2em .2em 1em;
	background: radial-gradient(circle at 60% 80%, white 40%, #bbb);
	border-radius:.2em;
	position: relative;
	box-shadow: 0 0 .5em #ddd;
	vertical-align: top;
}
.key::before{
	pointer-events: none;
	content:"";
	position:absolute;
	top: -.3em;
	left: -.4em;
	right: -.4em;
	bottom: -.8em;
	z-index: -1;
	border-style: solid;
	border-radius: .2em;
	border-width: .25em .35em .75em .35em;
	background: #ddd;
	border-color: #ddd #aaa #888 #bbb;
	box-shadow: 0 0.15em 0.2em;
}

.key:hover{
	margin-top: .7em;
	margin-bottom: .6em;
}

.key:hover::before{
	box-shadow:0 0.1em 0.1em;
}