JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>
    <head>
        <title>Login</title>
        <link rel="stylesheet" href="css/login.css">
    </head>
    <body>
        <form action="background_processing/login_process.php" enctype="multipart/form-data" method="post">
            <fieldset>
                <legend>Login</legend>
                <p>
                    <label for="username">Username</label><br>
                    <input type="text" id="username" name="username">
                </p>
                <p>
                    <label for="password">Password</label><br>
                    <input type="password" id="password" name="password">
                </p>
                <p>
                    <button type="submit" id="submit">Log in</button>
                </p>
            </fieldset>
        </form><br>
        <button id="signup" onclick="window.open('https://google.com/','_self');">Sign up</button>
    </body>
</html>

CSS

html, body {
    width: 100%;
}

body {
    text-align: center;
}

fieldset {
    border: 1px groove black;
    border-radius: 5px;
}

form {
    font-family: Segoe UI;
    margin: 0 auto;
    margin-top: 15%;
    width: 27.5%;
}

input {
    border: 1px rgb(175,175,175) solid;
    border-radius: 5px;
    font-family: Helvetica;
    font-size: 100%;
    margin-top: 2.5%;
    padding: 1% 0% 1% 0%;
}

legend {
    font-size: 150%;
}

button {
    background-color: rgb(0,117,255);
    border: 0px;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s ease-out;
}

button:hover {
    background-color: rgb(0,83,255);
    transition: background-color 0.15s ease-in;
}

button#submit {
    font-size: 100%;
    margin-top: 7%;
    padding: 2.5% 10% 2.5% 10%;
}

button#signup {
    font-size: 100%;
    margin-top: 1%;
    padding: 0.6% 2.5% 0.6% 2.5%;
}