JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<h2>Регистрация</h2>
<form method="post">
<p class="email">Введите адрес электронной почты
<input name="emailadress" type="email" placeholder="example@email.com" class="input">
</p>
<p class="username">Введите логин<br>
<input name="username" type="text" placeholder="Jack" class="input">
</p>
<p class="password">Введите пароль<br>
<input name="password" type="password" class="input">
</p>
<p class="rpassword">Повторите пароль<br>
<input name="password" type="password" class="input">
</p>
<div class="submit"><input type="submit" value="Зарегистрироваться" class="input"></div>
</form>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.container {
position: fixed;
width: 350px;
height: 500px;
border: 2px solid gray;
background-color: lightgrey;
text-align: center;
border-radius: 10px;
margin: auto;
top: 0;bottom: 0;left: 0;right: 0;
color: darkcyan;
}
h2 {
margin-top: 16px;
}
.email {
border: dotted 1px black; /*добавил, чтобы посмотреть ширину*/
position: absolute;
top:25%;
font-size: 14pt;
left: 50%;
margin-left: -25%;
}
.username {
position: absolute;
border: dotted 1px black;
top: 40%;
left: 50%;
margin-left: -25%;
font-size: 14pt;
}
.password {
border: dotted 1px black;
position: absolute;
top: 55%;
left: 50%;
margin-left: -25%;
font-size: 14pt;
}
.rpassword {
border: dotted 1px black;
position: absolute;
top: 70%;
left: 50%;
margin-left: -25%;
font-size: 14pt;
}
.submit {
width: 180px;
border: dotted 1px black;
position: absolute;
top: 90%;
left: 50%;
margin-left: -90px;
}
.input{
font-size: 14pt;
}