JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "header">
  <header>
    <h1>Header</h1>
    <form class = "login">
      Username <input type = "text" name= "username"><br/>
      Password <input type = "text" name ="password"><br/>
      <input type="submit" name= "submit" value="submit" id = "submit">
    </form>
  </header>
</div>
    <nav class = "home-main-nav-menu">
    <ul class = "main-ul">
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
        <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
      </li>
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Email</a></li>
        <li class = "sub-li-items"><a href = "#/">Phone</a></li>
      </ul>
    </li>
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Recent</a></li>
        <li class = "sub-li-items"><a href = "#/">All</a></li>
      </ul>
     </li>
      <li class = "main-li-items"><a href = "#/">Collaborate</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Now</a></li>
        <li class = "sub-li-items"><a href = "#/">Later</a></li>
      </ul>
      </li>
    </ul>
</nav>

CSS

.home-main-nav-menu{
  border-style: double;
  border-color: cyan;
}
.login{
  font-family: Ailerons;
  float: right;
  border-style: double;
  border-color: red;
}
.header{
  border-style: double;
  border-color: yellow;
}

header::after {
    content: "";
    clear: both;
    display: table;
}
header{
  border-style: double;
  border-color: blue;
}
h1{
  font-family: Ailerons;
  font-size: 100px;
  color: white;
  text-align: center;
  margin-bottom: -25px;
}
.main-li-items{
  display: inline-block;
  border-style: double;
  border-color: purple;
  padding-left: 0px;
}
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  display: none;
  position: absolute;
  margin-left: -4.1px
}
.main-ul{
  border-style: double;
  border-color: green;
  padding-left: 0;
}
ul{
  text-align: center;
  position: relative;
}

JavaScript

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});