JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<div class="drop-down">
 <span>Hello Arun</span>
 <ul>
   <li>My profile</li>
   <li>Calendar</li>
   <li>Messages</li>
 </ul>
</div>

CSS

.drop-down{
  position: relative;
}
.drop-down span{
  padding: 5px;
  border:solid 1px #ccc;
  display: block;
}
.drop-down ul{
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  background-color: blue;
  color: white;
  list-style:none;
  padding: 0;
  margin: 0;
  width: 100%;
}

JavaScript

$('.drop-down span').click(function(){
	$(this).parent().find('ul').slideToggle();
});