JSFiddle - React, Tailwind, and code Playground

HTML

test test test <span class="test">Hover me</span> test test test test

CSS

.test{
    color:#FFF;
    background:#000;
    padding:4px 4px 4px 30px;
    transition: padding 0.5s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    box-sizing:padding-box;
}

.test:hover{
    padding:4px 30px 4px 4px;
}