JSFiddle - React, Tailwind, and code Playground
by HappyCougar
HTML
<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="message_us" class="window" musyle="display: block;">
<p class="mus_head">Написать нам</p>
<div class="mus_black_clear"></div>
<p class="mus_sub_head_red"></p>
<img class="mus_close" src="/templates/real/images/close_icon.png" alt="">
<p class="mus_form_p">Ваше имя</p>
<input type="text" name="name" id="mus_input_name" value="">
<p class="mus_form_p">Email <span class="red_star">*</span></p>
<input type="text" name="email" id="mus_input_email" value="">
<p class="mus_form_p">Телефон</p>
<input type="text" name="telephone" id="mus_input_telephone" value="">
<p class="mus_form_p">Ваш вопрос или предложение <span class="red_star">*</span></p>
<textarea name="message" class="comm_field" id="mus_input_text" rows="8"></textarea>
<div id="mus_final"><p>Отправить</p></div>
</div>
CSS
#message_us {
padding: 20px 40px 35px 40px;
min-height: 415px;
width: 380px;
background: #FAFAFA;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
top: 120px;
}
.ms_calc input, .ms_calc textarea {
-webkit-box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.2);
box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.2);
-moz-box-shadow: inset 0px 2px 3px rgba(31, 31, 30, 0.4);
border: 1px solid #D1D1D1;
}
.mus_sub_head_red {
color: #F00;
text-align: center;
margin-bottom: 20px;
}
#message_us input {
width: 190px;
}
#mus_final {
background: #00A3CC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #FFF;
font-size: 18px;
line-height: 45px;
padding: 0 25px;
text-transform: none;
display: inline-block;
text-decoration: none;
-webkit-transition: background 0.5s ease-in;
-moz-transition: background 0.5s ease-in;
-o-transition: background 0.5s ease-in;
-ms-transition: background 0.5s ease-in;
cursor: pointer;
transition: background 0.5s ease-in;
margin-left: 120px;
margin-top: 20px;
}
.mus_head {
padding: 10px;
text-align: center;
font-size: 23px;
font-family: 'Open Sans';
color: #0688D8;
}
.mus_close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
opacity: 0.8;
}
#mus_input_text {
width: 360px;
padding: 5px 10px;
font-size: 15px;
}
.mus_form_p {
margin: 10px 0px;
font-size: 15px;
}
.mus_black_clear {
margin: 0px 0px 15px 0px;
height: 1px;
border-bottom: 1px solid #BEBEBE;
width: 100%;
left: 0px;
position: absolute;
}