JSFiddle - React, Tailwind, and code Playground

by Alex Rutherford

HTML

<div id="con">
    <ul>
        <li><a href="#test1">Test</a></li>
        <li><a href="#test2">Test</a></li>
        <li><a href="#test3">Test</a></li>
    </ul>
</div>

CSS

#con {
    width: 100%;
    background: #eee;
    text-align: center;
}
ul {
    list-style: none;
}
li {
    display: inline-block;
    width: 80px;
    height: 50px;
    outline: 1px solid #000;
}

a:hover {
    color: red;
    background: #fff;
}
a {
    display: block;
    height: 100%;
    width: 100%;
}