JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a>test 1</a></li>
    <li><a>test 2</a></li>
    <li><a>test 3</a></li>
    <li><a>test 4</a></li>
</ul>
<div></div>

CSS

li{
    background:red;
    float:left;
    margin:0 5px 0;
    border:3px solid red;
    border-bottom:10;
}

a{
    padding:5px;
    float:left;
}

div{
 float:left;
 padding:200px;
 border:3px solid red;   
    background:#ace
}

a:hover{
    background:#ace;   
    margin-bottom:-3px;
    padding-bottom:8px;/* original + 3 */
    position:relative;
   
}