JSFiddle - React, Tailwind, and code Playground

HTML

<button class="action action-trr" data-val="trr">TRR<span class="kc kc-trr">?</span></button>

CSS

button{
  display: inline-block;  
  width:90px;
  height:60px;
    margin: 0 10px 20px 0;
  font-size: 0.9em;    
  color: #fff;
  text-shadow: -2px 2px #000;
  border: none;
    position:relative;
  border-radius: 8px;
  box-shadow:
    0 10px 5px rgba(20,20,20,0.6),
    inset 0 5px 30px rgba(0,0,0,0.5);
  background-color:rgba(0, 0, 0, 0.8);
}
button:hover{background-color:rgba(0,0, 0, 0.5);}
button:active {
  box-shadow: 0px 5px 2px rgba(0,00,00,0.5),inset 0 5px 30px rgba(0,0,0,0.2);
  transform: translateY(5px);
}
button span.kc{
  position:absolute;
  top:-4px;
  right:-4px;
  display:inline-block;
  padding:0 6px;
  background-color:#434ad7;
  color:#f6f6f6;
  border-radius:3px;
  font-size:11px;
  line-height:16px;
  text-shadow:none;
}