JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  
  <a class="logo" href="#"><img class="logo" src="https://placingbad.com/50/50" alt="MusmanDev"></a>
  <nav>
    <ul class="nav__links">
      <li><a href="#">Blogs</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Courses</a></li>
      <li><a>|</a></li>
      <li>
        <div class="dropdown">
          <button class="dropbtn" onclick="toggleDropDown(event)">Show dropdown</button>
          <div id="myDropdown" class="dropdown-content">
            <a>Dark Mode</a>
            <a>Light Mode</a>
            <a>System</a>
          </div>
        </div>
      </li>
      <li><a href="#"><i class="fa-brands fa-github-square fa-xl"></i>‎</a></li>
    </ul>
  </nav>
</body>

CSS

.dropbtn {
    background-color: #24252A;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

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

.dropdown-content.show {
  display: block;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
.dropdown-content a:hover {
    background-color: #ddd;
}

JavaScript

const dropdown = document.getElementById("myDropdown");

function addListenerOutsideClick() {

	const outsideClickListener = (event) => {
    const isClickInside = dropdown.contains(event.target);

    if (!isClickInside) {
      	dropdown.classList.remove("show");
        removeClickListener();
    }
  }

  const removeClickListener = () => {
    document.removeEventListener('click', outsideClickListener);
  }
  
  document.addEventListener("click", outsideClickListener);
}

function toggleDropDown(event) {
		event.stopPropagation();
    dropdown.classList.toggle("show");
    addListenerOutsideClick();
}