JSFiddle - React, Tailwind, and code Playground

HTML

<span>This text gets stretched</span>

CSS

span {
    display: inline-block;
    background: #eee;
    border: solid 1px #ddd;
    padding: 8px 10px;
    font-size: 1.2em;
    font-weight: bold;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transition: all 250ms;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

span:hover { 
    background: darken(#E2F3E2, 8%);
    text-decoration: none; 
    -ms-transform: scale(1.05, 1);
    -mozilla-transform: scale(1.05, 1);
    -webkit-transform: scale(1.05, 1);
    transform: scale(1.05, 1);
}