JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class= "btn btn-yellow"> Office</a>
<a href="#" class= "btn btn-yellow"> Suporte</a>
<a href="#" class= "btn btn-yellow"> Buscar Lojas</a>
<a href="#" class= "btn btn-yellow">Lista de Ramal</a>

CSS

.btn{
 font-family: arial black;
 font-size: 13px;
 text-transform: uppercase;
 font-weight: 700;
 border: none;
 padding: 20px;
 display: inline-block;
 text-decoration:none;
}


.btn-yellow{
 background:#ffcc00;
 color: #002db3;
 box-shadow: 10px 10px 0px #e6b800; 

}

.btn-yellow:hover{

background: #002db3;
color:#ffcc00;
box-shadow: 10px 10px 0px #002699; 


}
.btn-yellow:active{
position:relative;
top: 5px;
box-shadow: none; 

}