JSFiddle - React, Tailwind, and code Playground

by bradleytrager

HTML

<header>
            <!-- header version Desktop -->
            <div class="container-fluid visible-desktop">
                <a href="/" class="logo">LOGO</a>
    
                <nav>
                    <ul>
                        <li id="shop-ov">
                            <div class="labelm">Menu A</div>
                            <div class="submenu">Test</div>
                        </li>
                        <li id="kitchen-ov"><div class="labelm">Menu B</div></li>
                        <li id="account-ov"><div class="labelm">My account</div></li>
                    </ul>
               
            </div>
            <!-- end header version Desktop -->
        </header>

CSS

header{
    background-color: rgb( 208, 84, 156 );
    box-shadow: 0px 0px 5px 0px rgb( 2, 2, 2 );
    min-height: 44px;
    top:0;
    left: 0;
    position: fixed;
    width:940px;
    float:left;
    z-index:10;
}

header .container-fluid .logo{
    float: left;
    margin: 8px 10px 12px 8px;
    font-family: "MotionCooker";
    color:#FFFFFF;
    font-size:30px;
    width:180px;
}

header .container-fluid .div-logo-center{
    width:100%;
    background-color:#FFFFFF;
    color: rgb( 208, 84, 156 );
    font-family: "MotionCooker";
    font-size:30px;
    height:45px;
    box-shadow: 0px 0px 5px 0px rgb( 2, 2, 2 );
    z-index:10;
    position: relative;
}

header .container-fluid .logo-center{
    background-color:#FFFFFF;
    color: rgb( 208, 84, 156 );
    font-family: "MotionCooker";
    font-size:30px;
    margin: 8px 10px 12px 8px;
}

header .container-fluid .logo:hover, header .container-fluid .logo-center a:hover{
    text-decoration:none;
}

header .container-fluid nav{
    float:right;
}

header .container-fluid nav.left{
    float:left;
}

header .container-fluid nav.left ul li:first-child{
    border-left: none !important;
}

header .container-fluid nav ul{
    margin: 0 0 0px 0px ;
}

header .container-fluid nav ul li{
    float:left;
    font-size: 16px;
    font-family: "ProximaNova";
    color: rgb( 255, 255, 255 );
    text-align: center;
    border-left:1px solid #FFFFFF;
    list-style: none;
    height:31px;
    padding:14px 0px 0 0px;
    cursor:pointer;
}

header .container-fluid nav ul li:hover{
    background-color:#FFFFFF;
    color: rgb( 208, 84, 156 );  
}

header .container-fluid nav ul li div.labelm{
    padding:0px 20px 0 20px;
}

header .container-fluid nav ul li div.submenu{
    /*display:none;*/
    height: auto;
    min-height:45px;
    border-width: 1px;
    border-color: rgb( 205, 205, 205 );
    border-style: solid;
    background-color: rgb( 255, 255, 255 );
    box-shadow: 0px 0px 5px 0px rgb( 0, 0, 0 );
    margin-top:...