JSFiddle - React, Tailwind, and code Playground

by Alex

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: 15px;
    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(){
    /*var flag=true;
    $(".re-call").click(function()
        {
            if(flag==true)
            {
                $(".re-call-form").slideToggle();
                flag=!flag;
            }
            else
            {
                $(".re-call-form").slideToggle();
                flag=!flag;
            }
    });*/
    $('.re-call').on('click', function(){
        if($(this).data('open') === 'true') {
             $(".re-call-form").slideUp();
             $(this).data('open', 'false');
        }
        else {
            $(".re-call-form").slideDown();
            $(this).data('open', 'true');
        }
    });
    $(document).on('click', function (e) {
        if($(e.target).closest('.re-wrap').length !== 1) {
            $('.re-call-form').slideUp();
            $('.re-call').data('open', 'false');
        }
    });
});