JSFiddle - React, Tailwind, and code Playground

HTML

<div id='page'>
        <div class="navbar">
            <ul class="nav-items">
                <li class='nav-item-start'><a href='#'>Active</a></li>
                <li class= 'nav-item'><a href='#'>Home</a></li>
                <li class='nav-item'><a href='#'>Blog</a></li>
                <li class='nav-item-end'><a href='#'>Login</a></li>
            </ul>
        </div>
    </div>

CSS

#page { /* не работает */
    position: relative;
    width: 100%;
    height: 100%;
    background: purple;
}

.navbar { /* не работает */
    position: relative;
    background: green;
    width: 100%;
    height: 6%; 
    top: 0%;
    left: 0%;
}

.navbar .nav-items {
    list-style-type: none;
    position: absolute;
    background: rgb(255, 230, 0);
    margin: 0%;
    padding: 0%;
    top: 50%;
    right: 3%;
}

.nav-items li {
    display: inline;
    font-size: 20px;
}

.nav-item {
    padding-left:25px;
    padding-right: 25px;
}

.nav-items .nav-item-start {
    padding-right: 20px;
}

.nav-items .nav-item-end {
    padding-left: 20px;
}

.nav-items a {
    color: black;
    text-decoration: none;
}