JSFiddle - React, Tailwind, and code Playground
HTML
<br />
<div id="contactf">
<form name="contact-form">
<label for="ContactForm1_contact-form-name">Ваше имя<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Введите Ваше Имя:" maxlength="50" type="text" /> </label><br />
<br />
<label for="ContactForm1_contact-form-email">Ваш E-mail<span style="color: red; font-weight: bolder;">*</span> <br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Укажите Ваш E-mail:" type="text" /> </label><br />
<br />
<label for="ContactForm1_contact-form-email-message">Сообщение <span style="color: red;"><b>*</b></span></label> <br />
<textarea class="contact-form-email-message" cols="74" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Введите текст сообщения..." rows="15" type="text"></textarea><br /><br />
<input class="contact-form-button contact-form-button-submit" type="reset" value="Очистить" />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" name="submit" type="button" value="Отправить" /> <br /><br />
<div style="max-width: 100%; text-align: center; width: 75%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
<br /><br /></div>
<div style='text-align: right; font-size: x-small;'> <a href='http://www.best-for-blogger.ru/2014/02/forma-svjazi-blogger.html' target='_blank' title='Contact Form for Blogger'><span style='color: #838383;'></span></a></div>
</form>
<style type="text/css">
#ContactForm1{
display:none!important;
}
</style>
</div>
CSS
/*Форма обратной связи*/
#contactf {
font-size: 12px;
font-family: "Verdana",sans-serif;
background-color:#fcfcfc;
text-align: left;
font-weight: bold;
padding: 3px 10px 3px 10px;
color: rgb(0, 0, 0);
border: 3px solid rgb(190, 190, 190);
text-shadow: 0px 1px 0px rgb(204, 204, 204);
box-shadow: 0px 1px 3px rgb(112, 107, 107), 1px 1px 0px rgba(162, 162, 162, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 2;
}
#ContactForm1{ display:none!important;}
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 50%;
width: 100%;
height: 30px;
font-weight:bold;
}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
height: 30px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
display: inline-block;
font-family: arial;
padding: 10px;
vertical-align: top;
max-width: 75%!important;
width: 70%!important;
height: 150px;
border-radius: 4px;
text-align: justify;
max-height: 300px;
}
.contact-form-name {
background: #FFF url (http://1.bp.blogspot.com/-aYAZKHxj784/UvdMwkai6pI/AAAAAAAAAu0/rwasg8cq43s/s320/name.png) no-repeat 7px 6px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
.contact-form-email {
background: #FFF url(http://1.bp.blogspot.com/-jnXFbfAxUvk/UvdMwtu4AVI/AAAAAAAAAuw/OO-GmlqlU88/s320/email.png) no-repeat 7px 8px;
padding: 5px 15px 5px 28px;
width: 100%;
max-width: 75%px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(http://1.bp.blogspot.com/-aYAZKHxj784/UvdMwkai6pI/AAAAAAAAAu0/rwasg8cq43s/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px...