JSFiddle - React, Tailwind, and code Playground

HTML

<header>
                <h1 id="logo">LOGO</h1>
                    <ul id="list">
                        <li id="item1">HOME</li>
                        <li id="item2">ABOUT US</li>
                        <li id="item3">CONTACT</li>
                        <li id="item4">BLOG</li>
                    </ul>



        </header>

CSS

*{
                margin:0;
                padding: 0;
            }
                header{
                    display: flex;
                    justify-content: space-between;
                    background: #2a2e33;
                    align-items: center;
                    width: 100%;
                    height: 60px;
                    position: relative;
                }

                #logo{
                    color:white;
                    margin-left: 10px;
                    position: relative;
                }


                #list{
                    display: flex;
                    height: 100%;
                    list-style: none;
                    color: white;
                }

                #item1{
                    padding-left:10px;
                    padding-right:10px;
                    padding-top: 20px;
                    max-height: 100%;
                    position: relative;
                }
                #item2{
                    padding-left:10px;
                    padding-right:10px;
                    padding-top: 20px;
                    max-height: 100%;
                    position: relative;
                }
                #item3{
                    padding-left:10px;
                    padding-right:10px;
                    padding-top: 20px;
                    max-height: 100%;
                    position: relative;
                }
                #item4{
                    padding-left:10px;
                    padding-right:10px;
                    padding-top: 20px;
                    max-height: 100%;
                    position: relative;
                }
                
                #item1:hover{
                    background:#1e2329;
                }
                #item2:hover{
                    background:#1e2329;
                }
                #item3:hover{
                    background:#1e2329;
                }
                #item4:hover{
      ...