I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information.
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.querySelector("#dropdownlogin").addEventListener('click', function()
{
dropdownlogin.style.display = block;
})
});
</script>
<div class="login">
<a href="#">Login</a>
<center>
<form id="dropdownlogin" action="">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c020d01092c09140d011c0009420f0301">[email protected]</a>">
<label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
<div id="loginbtn">
<button>Login</button>
<button>Forgot Password</button></p>
</div>
</form>
</center>
</div>