JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a class="dropbtn" onclick="myFunction()" href="#">Link 2</a>
        <ul class="dropdown-content" id="myDropdown">
          <li><a href="#">Drop 1</a></li>
          <li><a href="#">Drop 2</a></li>
          <li><a href="#">Drop 3</a></li>
          <li><a href="#">Drop 4</a></li>
        </ul>
</li>
      <li><a href="#">Link 3</a></li>
        <ul>
          <li><a href="#">Link 3 Drop</a></li>
        </ul>
      <li><a href="#">Link 4</a></li>
        <ul>
          <li><a href="#">Link 4 Drop</a></li>
        </ul>
      <li><a href="#">Link 5</a></li>
    </ul>
  </nav>

CSS

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content li {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li:hover {
  background-color: #ddd;
}

.show {
  display: block;
}

nav { padding: 0;
      font-size: 100%;
      text-align: center;
      position: relative;
}

nav ul { list-style-type: none;
     margin: 0.5em;
     padding-left: 0;
     font-size: 100%;
}

nav li {border-bottom: 1px solid #002171;}

nav a { text-decoration: none;
    display: block;
}

nav a:hover { color: #A52F00; 
          background-color: #000000; }

nav ul ul { position: absolute;
        display: none;
        padding: 0;
            }

nav ul ul li { display: block;
           background-color: #FFFFFF;
           width: 15em;
           text-align: center;
           margin-left: 0;}

nav li:hover ul { display: block; }

JavaScript

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}