JSFiddle - React, Tailwind, and code Playground

HTML

<article class="item" style="float:left; margin-left:10px; margin-top:15px; margin-bottom: 15px; width: 100px; height:100px; border: 1px #90ac6e solid; border-radius: 6px; background:#cfe8b1; text-align:center;">
    <i class="fa fa-dashboard" aria-hidden="true" style="font-size:46pt; color:#666;"></i><br />
    <em style="font-family:padrao; size: 12pt; text-decoration:none; color:#003300;">Business Intelligence</em>
</article>

CSS

article.item{
    margin: 5px;
    float:left; 
    margin-left:10px; 
    margin-top:15px; 
    margin-bottom: 15px; 
    width: 100px; height:100px; 
    border: 1px #90ac6e solid; 
    border-radius: 6px; 
    background:#cfe8b1; 
    text-align:center;
}

article.item:hover{
    margin: 5px !important;
    border: 1px red solid !important;
    border-radius: 6px !important;
    background:#ffffff !important;
}