JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <style type="text/css">
.wrap{
    width: 300px;
    margin: 0 auto;
    }
.box{
    float: left;
}
.box a{
    float: left;
    width: 40px;
    height: 40px;
    background-color: #edd;
    text-align: center;
    line-height: 40px;
    text-decoration: none;
    position: relative;/*必须*/
    z-index: 1;/*必须*/
    border:1px solid #000;
    margin-left: -1px;/*必须*/
}

.box a:hover{
    z-index: 2;/*必须*/
    border:1px solid #f00;
    
}
    </style>
</head> 
<body>
<div class='wrap'>
    <div class='box'>
        <a href="javascript:;">1</a>
        <a href="javascript:;">2</a>
        <a href="javascript:;">3</a>
        <a href="javascript:;">4</a>
        <a href="javascript:;">5</a>
    </div>
</div>


</body>
</html>