JSFiddle - React, Tailwind, and code Playground

by Natan Tavares Martins

HTML

<header>
            <nav>
                <ul id="menuprinc">
                    <a href="#"><li class="lancamentos">Lançamentos</li></a><a href="#"><li class="topYoutube">Top Youtube</li></a><a href="#"><li class="maisAssistidos">Artistas</li></a><a href="#"><li class="comoFunciona">Como Funciona</li></a>
                </ul>
        </nav>
        </header>

CSS

* {
    margin: 0px;
    padding: 0px;
}
header{
    position: relative;
    height: 79px;
    width: 100%;
    background-color: #053d74;

}
ul#menuprinc {
    position: absolute;
    font-size: 1.38em;
    top: 29px;
    width: 568px;
    right: 100px;
}

ul#menuprinc a {
    text-decoration: none;
    color: white;
    font-family: Agency FB;
}
ul#menuprinc li {
    display: inline;
    padding-right: 26px;
    padding-left: 29px;
}
ul#menuprinc li.lancamentos {
    border-bottom: 5px solid #762d2f;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
    -moz-transition: border-bottom 0.2s;

}
ul#menuprinc li.topYoutube {
    border-bottom: 5px solid #c0a035;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
}
ul#menuprinc li.maisAssistidos {
    border-bottom: 5px solid #579840;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
}
ul#menuprinc li.comoFunciona {
    border-bottom: 5px solid white;
    padding-bottom: 21px;
    -webkit-transition: border-bottom 0.2s;
}
ul#menuprinc li.lancamentos:hover, header ul#menuprinc li.topYoutube:hover, header ul#menuprinc li.maisAssistidos:hover, header ul#menuprinc li.comoFunciona:hover {
    border-bottom: 5px solid #053d74;
}