JSFiddle - React, Tailwind, and code Playground

HTML

<div class="headerprofile">
            <div class="ULlist">
                
                <ul>   
                   
					<li><a href="#">Profile</a>
                        <ul id="submenu">
                           <li><a href="#">Friend</a></li>
                           <li><a href="#">Account</a></li>
                           <li><a href="#">Privacy</a></li>
                        </ul>
					</li>
				</ul>
                    
            </div>
        </div>

CSS

.midbox {
        margin:0px auto;
        width:900px;
        height:1000px;
        background:#c0d8d8;
        border-radius:10px;
        box-shadow: 10px 10px 10px #969696;
    }
    .headerprofile {
        width:900px;
        height:30px;
        background-color:skyblue;
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        box-shadow:0 1px -2px #70badb
    }

            
        .headerprofile .ULlist ul li:hover > ul{
         display:block;
        }
        .headerprofile .ULlist ul ul li a {
            padding:     15px;     
            position:relative;
        }
        .headerprofile .ULlist ul ul li {
           float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
             
        }
        .headerprofile .ULlist ul ul {
            display: none;
   background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
           
        }
        .headerprofile .ULlist ul {
            position:relative;
            list-style:none;
            padding:0 10px;
        }

            .headerprofile .ULlist ul li {
                float:left;
            }
       
        .headerprofile .ULlist ul li a{
           
		display: block; padding: 6px 10px;
		color: #757575; text-decoration: none;
	
        }

        #submenu {
            top: 30px;
        }