JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="document.getElementById('loginContainer').style.display='block';event.stopPropagation();">Show Login</button>
<div id="loginContainer" onclick="containerClicked(event)">
    <div><span>User Name:</span><input id="username" /></div>
    <div><span>Password:</span><input id="password" type="password"/></div>
</div>
<div>Something else</div>

JavaScript

document.onclick = function(){
    console.warn('doc clicked');
    document.getElementById('loginContainer').style.display = 'none';
}
function containerClicked(ev)
{
    console.warn('clicked');
    ev.stopPropagation();
}