JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
       <div class="menu">
           <a class="user" href="#">Brett</a>
           <ul>
               <li>
                    <a href="#">Settings</a>
               </li>
               <li>
                   <a href="#">Logout</a>
               </li>
           </ul>
       </div>
   </div>

CSS

body {
	font-size: 50px;
}
.container {
	margin-top: 100px;
	margin-left: 200px;
}
a {
	text-decoration: none;
	/*color: #fff;*/
}
.user {
	position: relative;
	z-index: 1000;
	margin-left: -200px;
}
ul {
	list-style: none;
	position: absolute;
	top: 2%;
	left: 11%;
	visibility: hidden;
	opacity: 0;
}
.menu a:hover + ul {
	visibility: visible;
	opacity: 1;
	-webkit-transition: visibility 1s, opacity 1s;
	/*color: #000;*/
	/*-webkit-transition: color 1s;*/
}