JSFiddle - React, Tailwind, and code Playground

HTML

<form action="/login">
        <h2 class="form-title">Sing up</h2>

        <input class="form-input" type="text" placeholder="First Name" name="firstname"><div class="line-break"></div>
        <input class="form-input" type="text" placeholder="Last Name" name="lastname">

        <input class="form-input" type="text" placeholder="Email" name="email">

        <input class="form-input" type="password" placeholder="Password" name="password">
        <input class="form-input" type="password" placeholder="Confirm" name="confirm">

        <input class="form-input" type="text" placeholder="Age" name="age">
        </form>

CSS

form  {
    width: 100%;
    height: 100%;
    /*
    border: 1px solid white;
    */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*
Just for style, nevermind it
*/
.form-input  {
    height: 20px;
    width: 50%;
    background-color: silver;
    border-radius: 10px;
    border: none;
    padding: 6px;
    margin: 15px;

 }