JSFiddle - React, Tailwind, and code Playground

by urdh

HTML

<ul>
        <li id="here"><a href="#">Nyheter</a></li>
        <li><a href="#">Polkagrisar</a></li>
        <li><a href="#">Tyfus</a></li>
        <li><a href="#">Reportage</a></li>
    </ul>

CSS

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; /*Fixed om menyn ska följa med när man scrollar*/
    top: 0;
    left: 0;
    background: #f2f2f2;
    border-bottom: 3px solid #a8d5fb;
    font-size: 11px;
    width: 100%;
}
li {
    display: inline-block;
    padding: 2px 2px;
    margin: 0 8px;
    border-bottom: 3px solid #a8d5fb;
    margin-bottom: -3px;
}
li a{
    color: #3c6e9d !important;
    text-decoration: none !important;
}
li:hover, #here{
    border-bottom-color: #3986cd;
}
#here a {
    color: black !important;
    font-weight: bold;
}