JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <form action="validatelogin.php" method="POST">
                <p>Username:</p>
                <input type="text" name="usernameinput" id="usernameinput" />
                <p>Password:</p>
                <input type="Password" name="passwordinput" id="passwordinput" />
                <br />
                <div style="margin-top:10px;">
                    <input type="submit" value="Login" />
                    <button type="button" onclick="location.href=\'register.html\';">Register</button>
                </div>
            </form>
        </div>

CSS

.container
{
    background: #FFF;
    opacity: 0.6;
    width: 320px;
    height: 500px;
    align-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 30px 30px;
    transition: 0.3s;
}
.container:hr
{
    opacity: initial;
    transition: 0.3s;
}
.container input[type="text"]:focus .container
{
    opacity: initial;
    transition: 0.3s;
}

JavaScript

$('input').mousedown(function() {
	$(".container").css("opacity", "initial");
});
$(window).click(function () {
    $('.container').css("opacity", "0.6")
});
 
$('.container').click(function (event) {
    
    event.stopPropagation();
});