JSFiddle - React, Tailwind, and code Playground

HTML

<h1>PerusMOOC >></h1>
<header>
    <nav>
        <ul id="navigation">
            <li><a href="#">PerusMOOC?</a></li>
            <li><a href="#">Materiaali</a></li>
            <li><a href="#">Oma etenemiseni</a></li>
        </ul>
    </nav>
</header>

CSS

body{
    background-color: rgb(233, 229, 217);
    font-size: 20px;
    font-family: Arial, sans-serif;
}

h1{
    color: rgb(73, 69, 69);
}

#navigation{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: rgb(73, 69, 69);
    border-radius: 10px;
    padding: 0px 40px;
    margin-bottom: 40px;
}

#navigation li{
    float: left;
}

@media screen and (max-width: 700px){
    h1{
        font-size: 1.4em;
    }
    
    #navigation{
        padding: 0px;
    }
    
    #navigation li{
        display: block;
        float: initial;
    }
    
    #navigation li a{
        display: block !important;
        font-size: 0.9em !important;
    }
}

#navigation li a{
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.1em;
    color: rgb(233, 229, 217);
    text-decoration: none;
}

#navigation li a:hover{
    color: rgb(73, 69, 69);
    background-color: rgb(233, 229, 217);
}