JSFiddle - React, Tailwind, and code Playground

by Oliver Zhang

HTML

<body>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</nav>
</body>

CSS

*{
    margin:0;
    padding:0;
}
html{
     width:100%;
     height:100%;
     background: radial-gradient(#fea, #fa8);
    
}
nav{
    margin:10px;
    width:150px;
    border-radius:5px;
    background:#FF6600;
    box-shadow:1px 2px 10px rgba(0,0,0,0.7);
    overflow:hidden;
}
ul{
    list-style:none;
    text-align:center;
}
a{
    display:block;
    text-decoration:none;
    color:white;
    padding:5px 0;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
li+li{
    border-top:1px solid white;
}
li:first-child{
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
li:last-child{
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}
a:hover{
    background:white;
    color:#FF6600;
    border-left:10px solid #FF6600;
}