JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav"><span>click me</span></div>
<div class="subnav">submenu</div>

CSS

*{
  padding:0;
  margin:0;
}
.nav{
  background:#ff0000;
  height:50px;
  position:relative;
  z-index:20;
}
.nav span{
  cursor:pointer;
}
.subnav{
  position:absolute;
  top:-100%;
  left:0;
  height:200px;
  width:100px;
  background:#00A3C8;
  z-index:10;
  -webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-ms-transition: all .3s ease;
	transition: all .3s ease;
}
.subnav.open{
  top:60px;
}

JavaScript

$('.nav span').click(function(){
	$('.subnav').toggleClass('open');
});