JSFiddle - React, Tailwind, and code Playground

HTML

<div id="noticeMenu" class="noticemenu">
    <label for="menu-toggle3"></label>
    <input type="checkbox" id="menu-toggle3"/>
    <ul id="menu">
        <li class="option">
            <a href="#" >First link</a>
        </li>
        <li class="option">
            <a href="#">Second link</a>
        </li>
        <li class="option">
            <a href="#">Third link</a>
        </li>
    </ul>
</div>

CSS

.noticemenu ul {
    position: relative;
    display: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
}
#menu-toggle3:checked ~ ul {
        display: block;
}
.noticemenu  ul li {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    top: 0;
}
.noticemenu ul li .active {
    background: #222222;
}
.noticemenu ul li a {
    position: relative;
    width: 100%;
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    color: #ffffff;
    background: #555555;
    display: block;
}
.noticemenu ul li a:hover {
    background: #444444;
}

JavaScript

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});