JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outblock1">
<div class="inblock">
</div>
</div>

<br><br>

<div class="outblock2">
<div class="inblock">
</div>
</div>

CSS

.outblock1 {
  width:30px;
  height:30px;
  padding:3px 0 0 3px;
  border:1px solid black;
  background:gray;
}

.outblock2 {
  width:30px;
  height:30px;
  padding:0 3px 3px 0;
  border:1px solid black;
  background:gray;
}

.inblock {
  width:28px;
  height:28px;
  padding:0;
  border:1px solid black;
  background:white;
}