JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="re-wrap">
                    <div class="re-call"><span>Заказать обратный звонок</span></div>
                        <div class="re-call-form">
                            <h3>заказать обратный звонок</h3>
                            <form action="bla-bla">
                                <div class="re-call-text">
                                    Номер телефона:*
                                    <input type="text" class="re-call-input">
                                </div>
                                <div class="re-call-text" re-call-input>
                                    Контактное лицо:*
                                    <input type="text">
                                </div>
                                <div class="t-form-text">
                                        <img src="images/captcha.jpg" alt="" class="t-captcha">
                                        <div class="t-captcha-wrap">
                                            Введите код, указанный на картинке:
                                            <input type="text" class="input-captcha">
                                        </div>
                                </div>        
                                <div class="t-form-submit">
                                        <input type="button" value="Отправить заявку" class="button-site">
                                    </div>
                            </form>
                        </div>
                </div>

CSS

.re-call{
    position: relative;
    margin: 10px 0 0;
    padding: 0 0 0 25px;
    background: url(images/phone.png) no-repeat 30% 0;
    font-size: 12px;
    color: #025b94;
    height: 20px;
    text-align: right;
    cursor: pointer;
}

.re-call span{
    border-bottom: 1px dashed #025b94;
}


.re-call-form{
    display: none;
    position: absolute;
    top: 115px;
    left: -100px;
    width: 300px;
    background: #f2f7fb;
    padding: 10px 20px 20px 20px;
    font-size: 12px;
    color: #464646;
    text-align: left;
    border-radius: 15px;
    box-shadow: 0 0 15px 2px rgba(0,0,0,0.5);
    z-index: 99;
}

JavaScript

$(function(){
    $('.re-wrap').on('click', function(){
        if($(this).data('open') === 'true') {
             $(".re-call-form").css('display', 'none');
             $(this).data('open', 'false');
             $('.re-call').removeClass('aut-popup-border_active');
        }
        else {
            $(".re-call-form").css('display', 'block');
            $(this).data('open', 'true');
            $('.re-call-form').addClass('aut-popup-border_active');
        }
    });
    $(document).on('click', function (e) {
        if($(e.target).closest('.re-wrap').length !== 1) {
            $('.re-call-form').css('display', 'none');
            $('.re-wrap').data('open', 'false');
            $('span.aut-popup-border').removeClass('aut-popup-border_active');
        }
    });
});