JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<form action="#">
    <p>
        Пожалуйста, заполните обязательные поля.
    </p>
    <p class="fill">
        <p class="req">Имя: <input name="username" type="text" required></p><br>
        <p class="age">Возраст: <input name="age" type="number" min="0" max="120"></p><br>
        <p class="req2">E-mail: <input name="e-mail" type="text" required></p><br>
        <p class="website">Сайт: <input name="user-website" type="text"></p>
    </p>
    <p>
        <input type="submit">
    </p>
</form>

CSS

p {
    font-family: Serif;
    font-size: 1em;
}

.fill {
}

.req {
    background: url(http://cs408331.vk.me/v408331154/aa75/bFmTfWGpw_Y.jpg) no-repeat;
    background-position: 28% 50%;
    margin: 0 0 -10px 0;
}

.req2 {
    background: url(http://cs408331.vk.me/v408331154/aa75/bFmTfWGpw_Y.jpg) no-repeat;
    background-position: 30% 50%;
    margin: 10px 0 -5px 0;
}

.age {
    background: url(http://cs408331.vk.me/v408331154/aa6e/Y5tdKqJpQ3Q.jpg) no-repeat;
    background-position: 19% 50%;
}

.website {
    background: url(http://cs408331.vk.me/v408331154/aa6e/Y5tdKqJpQ3Q.jpg) no-repeat;
    background-position: 29% 50%;
}

.req::after {
    content: '';
    background: url(http://cs408331.vk.me/v408331154/aa6e/Y5tdKqJpQ3Q.jpg) no-repeat;
    
}