JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainMenu">
        <ul>
                <li><center><a href="#">Test 1</a></center>
                        <ul>
                                <li><center><a href="#">Test</a></center></li>
                                <li><center><a href="#">Test2</a></center></li>
                                <li><center><a href="#">Test3</a></center></li>
                                <li><center><a href="#">Test4</a></center></li>
                                <li><center><a href="#">Test5</a></center></li>
                        </ul>
                </li>
                <li><center><a href="#">Test 2</a></center>
                        <ul>
                                <li><center><a href="#">Test</a></center></li>
                                <li><center><a href="#">Test2</a></center></li>
                                <li><center><a href="#">Test3</a></center></li>
                                <li><center><a href="#">Test4</a></center></li>
                                <li><center><a href="#">Test5</a></center></li>
                        </ul>
                </li>
                <li><center><a href="#">Test 3</a></center></li>
                <li><center><a href="#">Test 4</a></center>
                        <ul>
                                <li><center><a href="#">Test</a></center></li>
                                <li><center><a href="#">Test2</a></center></li>
                                <li><center><a href="#">Test3</a></center></li>
                                <li><center><a href="#">Test4</a></center></li>
                                <li><center><a href="#">Test5</a></center></li>
                        </ul>
                </li>
                <li><center><a href="#">Test 5</a></center></li>
                <li><center><a href="#">Test 6</a></center></li>
                <li><center><a href="#">Test 7</a></center></li>
        </ul>
</div>

CSS

#mainMenu ul{
        width:954px;
        padding:0;
        margin:5px 0 10px 0;
        list-style-type:none;
        border:solid 2px #ddd;
        font-size: 18px;
        text-transform: uppercase;}
       
#mainMenu ul li a{
    width: 100%;
        text-decoration:none;
        color:#000000;
        background-color:#eee;
        padding:0.2em 0.6em;
        border-right:0px solid white;
    display:block;
}
       
#mainMenu a:hover{
        color:#FFFFFF;
        background-color:#2E9AFE;}
       
#mainMenu ul li{
    display:inline-block;
    position: relative;
}
       
#mainMenu ul ul {
        background-color: #eee;
        display: none;
        width: 133px;
        height: auto;
        position: absolute;
        border: solid 1px #ddd;
        top: 23px;
}
 
#mainMenu ul li:hover > ul{
        display:block;
        padding:0;
        margin:5px 0 10px 0;
        list-style-type:none;
        border:solid 2px #ddd;
        font-size:18px;
        text-transform:uppercase;}
 
#mainMenu ul ul li:hover a{
        color:#FFFFFF;
        background-color:#2E9AFE;}
 
#mainMenu ul ul li:hover {  
        cursor:pointer;}
 
#mainMenu ul ul li {
        float:none;
        padding:10px;}
 
#mainMenu ul ul li{
        font-size:16px;
        padding:0 10px;
}

#mainMenu ul > li:hover > ul{
    display:block;
}