JSFiddle - React, Tailwind, and code Playground

by Варлам Ерофеич

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: 100vh; /* Здесь - единственное изменение исходного текста. */
    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;
}