JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <span>Имя</span> <input type="text"/><span></span><br/>
    <span>Фамилия</span> <input type="text"/><span></span><br/>
    <span>Город</span> <input type="text"/><span></span><br/>
    <span>Эл. почта</span> <input type="email"/><span></span><br/>
    <span>Пароль</span> <input type="password"/><span></span><br/>
    <span>Повторите</span> <input type="password"/><span></span><br/>
    <span>Ведите число с картинки</span><br/> 
   
   
</div>
<div class="footer">
    <button>Зарегистрироваться</button>
</div>

CSS

div.wrap {
    border: 1px solid #dedede;
    border-radius: 3px;
    padding: 20px;
    font: 13px/16px Arial;
}

input {
    margin-bottom: 10px;
    width: 250px;
    height: 20px;
    border: 1px solid #dedede;
    outline: none;
    margin-right: 10px;
}

input:nth-of-type(3), input:nth-of-type(6) {margin-bottom: 30px;}
input:nth-of-type(7) {margin: -70px 10px 0 90px;}
span:nth-of-type(13) {width: 150px;height: 35px;}

span:nth-of-type(13):after {
    content:'';
    display: block;
    width: 66px;
    height: 30px;
    margin-top: 15px;
    padding: 0;
    background: url(http://htmlbook.ru/files/images/practical/24.png) no-repeat 4% 80%;
}
span {display: inline-block;width: 66px;padding-right: 20px;}

input:valid + span:after {content: url("http://www.textsale.ru/galochka.gif");}
input:invalid + span:after {content: url("http://horizon.ucoz.org/_nw/0/99019486.png");}

input:invalid + span:before {
    content: "Неправильно";
    color: red;
    position: relative;
    top: 15px;  
    left: 15px;
    margin: 0;
    padding: 0;
}

div.footer {
    height: 50px;
    border-radius: 5px;
    background: #dedede;
    margin-top: 10px;
}

button {
    border-radius: 25px;
    margin: 12px 0 0 110px;
    padding: 2px 10px;
    color: #fff;
    outline: none;
    background: #008F00;
    position: relative;
    z-index: 3;
    opacity: 0.8;
}

button:before {
    content: '';
    background: #000;
    border-radius: 10px;
    position: absolute;
    display: block;
    top: 2px;
    left: 6px;
    padding: 0;
    margin: 0;
    z-index: -1;
    width: 150px;
    height: 10px;
    background: #3AA83A;
}

    button:after {
    content: '';
    background: #000;
    border-radius: 10px;
    position: absolute;
    display: block;
    top: 15px;
    left: 21px;
    padding: 0;
    margin: 0;
    z-index: -1;
    width: 120px;
    height: 1px;
    box-shadow: 0 0 6px 5px #00E000;
    background: #00E000;
}