JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<div class="keyboard">
  <div id="KC_Q" class="key"><span>Q</span></div>
  <div id="KC_comma" class="key"><span>&lt;</span><span>,</span></div>
</div>

CSS

* {
margin: 0;
padding: 0;
}
.keyboard{
  padding: 12px;
}

.key{
  padding: 4px;
  width: 40px;
  height: 40px;
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
}
.key>span{
  display: block;
  font-size: 15px;
  padding-left: 4px;
  margin: auto;
}
.key>span:first-child{
  padding-bottom: 0px;
}
.key>span:last-child{
  padding-top: 0px;
}
.key>span:only-child{
  font-size: 30px;
}