JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="header">
    <h2> Register </h2>
</div>

<form method="post" action="register.php">
<div class="form-inner">
  
    <div class="input-group">
        <label> Username </label>
        <input type="text" name="username">
    </div>
    <div class="input-group">
        <label> Email </label>
        <input type="email" name="email">
    </div>
    <div class="input-group">
        <label> Password </label>
        <input type="password" name="password_1">
    </div>
    <div class="input-group">
        <label> ConfirmPassword </label>
        <input type="password" name="password_2">
    </div>
    <div class="input-group">
        <button type="submit" class="btn"> Register </button>
    </div>
  </div>
  </form>

 </body>

CSS

* {
margin: 0px;
padding: 0px;

}

body {
font-size: 120%;
background: #F8F8FF;

}

.header {
width: 30%;
margin:50px auto 0px;
color: white;
background: #5F9EA0;
text-align:center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;


}

form, .content {
width: 576px;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;

}

.input-group {
margin: 10px 0px 10px 0px;
}

 .input-group label {
display: block;
text-align: left;
margin: 3px;

} 

.form-inner {
  width: 60%;
}

.input-group input {
height: 20px;
width: 100%;
padding: 5px 10px;
font-size: 1em;
border-radius: 1px;
border: 1px solid gray;
margin-left: 3px;
} 

.btn {
padding: 8px;
font-size: 1em;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
margin:0 auto;
display: block;
}