JSFiddle - React, Tailwind, and code Playground

HTML

<a href="ts3server://craft412.serveminecraft.net:9987">
  <div class="teamspeak-box">
    <div class="teamspeak-icon">
      <img src="http://filepic.ru/file/1436899103.png" alt="">
    </div>
    <p>TEAMSPEAK</p>
  </div>
</a>

CSS

.teamspeak-box{
  width: 159px;
  height: 43px;
  background: #212121;
  border-radius: 0px 0px 5px 5px;
  overflow: hidden;
  color: white;
  display: table;
}
.teamspeak-icon{
  width: 43px;
  height: 43px;
  background: #313131;
  display: table-cell;
  transition: all 0.5s ease;
}
.teamspeak-icon img{
  width: 100%;
}
.teamspeak-box p{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  -moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}