JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div class="outer">
    <p>Регистрация</p>
    <div class="inner">
        E-mail<br><input type="e-mail" name="e-mail" class="e-mail"><br>
        Пароль<br><input type="password" name="e-mail" class="pass"><br>
        <span>Ещё раз</span><br><input type="password" name="e-mail" class="pass-repeat">
        <button>Отправить</button>
    </div>
</div>

CSS

.outer {
    width: 450px;
    height: 285px;
    background: #0785D4;
    border: 3px solid #0A6298;
    color: #fff;
    font: 16px/20px Arial;
}

p {margin: 20px;font: 24px/24px Arial;}
.inner {border-top: 1px solid #fff;padding: 30px 0 0 20px;}
.e-mail {width: 360px;margin-bottom: 30px;}
.pass-repeat, .pass {width: 170px;}
.pass-repeat, span {float: right;margin-right: 65px;margin-top: -41px;}
span {margin-right: 175px;}
button {margin-top: 10px;border: none; background: #E9CC6E;padding: 3px 8px;outline: none;}
button:hover {cursor: pointer;}