JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loginboxwrapper">
    <a href="javascript:void();">Login</a>
    <div class="loginboxform">
        <form action="dologin.php" method="post">
            <div class="fieldelement">
                <label for="loginusername">Email Address:</label>
                <input type="text" name="username" id="loginusername" />
            </div>
            <div class="fieldelement">
                <label for="loginpassword">Password:</label>
                <input type="password" name="password" id="loginpassword" />
            </div>
            <div class="rememberme">
                <label for="rememberme">
                    <input type="checkbox" id="rememberme" name="rememberme" />Remember Me
                </label>
            </div>
            <div>
                <a href="pwreset.php" class="forgotpassword">Forgot Password?</a>
                <input type="submit" value="Login" />
            </div>
        </form>
    </div>
</div>

CSS

.loginboxwrapper {
  position: relative;
  z-index: 10;
}
.loginboxwrapper .loginboxform {
  display: none;
  position: absolute;
  top:100%;
  left: 0;
  width: 200px;
  height: 150px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(0,0,0,.3);
  z-index: 11;
  padding: 20px 10px;
  -webkit-border-radius: 4px;
          border-radius: 4px;
}
.loginboxwrapper:hover .loginboxform {
  display: block;
}
.fieldelement {
  display: block;
}
.fieldelement label {
  display: block;
  color: #FFF;
  font-family: Tahoma;
  font-size: 12px;
  font-weight: 700;
}
.forgotpassword {
  display: block;
}
.rememberme {
  display: block;
  color: #FFF;
  font-family: Tahoma;
  font-size: 12px;
}