JSFiddle - React, Tailwind, and code Playground

HTML

<div class="functionButtonDiv" id="functionButtonDiv">
    <button type="button" class="functionButtonChat">Dummy1</button>
    <button type="button" class="functionButton">Dummy2</button>
    <button type="button" class="functionButton">Dummy3</button>
    <button type="button" class="functionButton">Dummy4</button>
</div>

CSS

.functionButtonChat{
  width:60px;
  height:25px;
  border: 1px solid #A3DEF1;
  outline:none;
  background: #F2F5FD;
}

.functionButtonChat:hover{
  border-left: 4px solid #A3DEF1;
  border-top: 4px solid #A3DEF1;
}

.functionButton{
  width:60px;
  height:25px;
  border: 1px solid #A3DEF1;
  border-left: none;
  outline:none;
  background: #F2F5FD;
}

.functionButton:hover{
  border-top: 4px solid #A3DEF1;
}

#functionButtonDiv button{
    vertical-align: top;
}