JSFiddle - React, Tailwind, and code Playground

HTML

<div id="form_border">
    <form id="form" method="post" action="">
        <p>Username:<br> <input type="text" name="user_name" /> <br></p>
        <p>Password:<br> <input type="password" name="user_pass"><br></p>
        <p>Password again:<br> <input type="password" name="user_pass_check"><br></p>
        <p>E-mail:<br> <input type="email" name="user_email"><br></p>
        <input type="submit" value="Sign Up" />
     </form>
        <a id="existing_account" href="sign_in.php">Already have an account?</a>
    </div>

CSS

#form_border{
    margin: auto;
    width: 400px; 
    border-style: solid;
    border-color: black;
    border-width: 1px;
}
#form {
    width: 50%;
    height: 50%;
    margin: auto;
    padding-top: 2em;
    text-align: center;
}
#form form{
    display: block;
}
#existing_account{ 
    text-align: center;
    text-decoration: none;
    color: black;
}
input[type=submit] {
    background:white;
    border:1px solid;
    border-color: #292929;
    cursor:pointer;
    border-radius: 5px; 
}   
@media screen and (max-width:399px){
    input[type="text"],
    input[type="password"],
    input[type="email"]{
        width:90%;
    }
    #form_border{
        width:98%;
    }
    #form {
        width: 50%;
        height: 50%;
    }
}