JSFiddle - React, Tailwind, and code Playground

by raskalbass

HTML

<div class="zakaz_confirm"><a href="#">подтвердить заказ</a></div>  
<div class='zakaz_div'>
    <div class='zakaz_close'><a class='zakaz_exit' href='#'>Х</a>
    </div>
    <form id='zakaz_form'>
         <h3 style='margin-bottom: 10px;'><b>заполните форму чтобы сделать заказ</b></h3>

        <p>имя</p>
        <input type='text' name='name' value='' />
        <p>город/область</p>
        <input type='text' name='city' value='' />
        <p>организация</p>
        <input type='text' name='org' value='' />
        <p>телефон</p>
        <input type='text' name='tel' value='' />
        <p>e-mail</p>
        <input type='text' name='mail' value='' />
        <p>комментарий</p>
        <textarea style='height: 60px' name='message' /></textarea>
        <div class='zakaz_send'> <a href='javascript:{}' onclick='document.getElementById(' zakaz_form ').submit();'>отправить</a>

        </div>
    </form>
    <div id='mail_mess'></div>
</div>
<div id='mask' class='zakaz_exit'>sd</div>

CSS

.zakaz_close a {
    position: absolute;
    right: 10px;
    top: 10px;
    text-decoration: none;
    color: maroon;
}
.zakaz_div {
    z-index: 1000;
    position: absolute;
    top: 200px;
    display: none;
    background: white;
    padding: 10px 30px;
    font-weight: 300;
    font-family:'SegoeUIBold';
    background: white;
    font-size: 18px;
}
.zakaz_div input, .zakaz_div textarea {
    width: 100%;
    background-color: rgba(138, 116, 62, 0.15);
    height: 20px;
}
.zakaz_send {
    margin: 0 auto;
    width: 183px;
    background: #A3D747;
    height: 40px;
    text-align: center;
    -webkit-transition: background 1s ease;
    text-transform: lowercase;
}
.zakaz_send a {
    color: #fff;
    text-decoration: none;
    font-family:'SegoeUIBold';
    font-size: 19px;
    line-height: 36px;
    display: block;
    width: 100%;
    height: 100%;
}
.zakaz_send a:hover {
    background: #C7B886;
}
#mask {
    display: none;
    width:100%;
    height:100%;
    left: 0px;
    top:0px;
    background-color: black;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
    opacity: 0.4;
    position: fixed;
    z-index: 999;
}

JavaScript

$(function () {
    $(".zakaz_confirm a").click(function () {
        $(".zakaz_div").fadeIn();
        $("#mask").fadeIn();
    });
    $(".zakaz_exit").click(function (e) {
        e.preventDefault();
        $(".zakaz_div").fadeOut();
        $("#mask").fadeOut();
    });
});