JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

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;
                }

                li{
                    padding-left:10px;
                    padding-right:10px;
                    padding-top: 20px;
                    max-height: 100%;
                    position: relative;
                }
                
                
                li:hover{
                    background:#1e2329;
                }
                

                li::before{
                    content:"";
                    background-color: chocolate;
                    width: 100%;
                    height:4px;
                    position: absolute;
                    top:0;
                    left:0;
                    display: none;
                }

                li:hover::before{
                    display: block;
                }