JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="#" method="post" id="login">
   <div>
        <input type="text" id="username" name="username" />
   </div>
   <div>
        <input type="text" id="password" name="password" />
   </div>
    <div id="submit">
        <input type="submit" value="Login" />
    </div>    
</form>
</body>
</html>

CSS

form { 
    width: 500px; 
    padding:0; 
    margin:0;
}
form div, form div input {
    height:20px;
    margin-bottom:4px;
}
input[type=text] { 
    width: 500px; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
}
#submit input{
    background:transparent; 
    margin:auto; 
    border:none;
}
#submit{ 
    text-align:center; 
    background-color:#CCC; 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0;
    cursor:pointer;
}

JavaScript

function submit_form()
{
    alert('form submitted');
    return false;
    
    // when you are ready, do this: document.forms['login'].submit();
}


document.getElementById('submit').addEventListener('click',submit_form,false);