JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<ul>
    <li>
        <a>test</a>
    </li>
    <li>
        <a>test</a>
    </li>
    <li>
        <a>test</a>
    </li>
</ul>

CSS

* {
    box-sizing: content-box;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    background-clip: padding-box;
    background-color: #c0c0c0;
    border-bottom: 1px solid transparent;
    padding: 0 10px;
}

li:hover {
    background-color: #cecece;
}

a {
    border-bottom: 1px solid #c00;
    display: block;
    margin: 0 0 -1px 0;
    padding: 10px 0;
}

li:first-child {
    border-top: 1px solid transparent;    
}

li:first-child a {
    border-top: 1px solid #c00;
    margin-top: -1px;
}