JSFiddle - React, Tailwind, and code Playground

by ehsan rad

HTML

<div class="div-fix">
<div class="offer-shop">

    <div class="cur-package">
        <div class="offer-close"><i class="fa fa-times"></i></div>
        <h6>سرویس یک ماهه</h6>

        <div class="pack-b">

            <div class="pack-price">6500 تومان</div>
            <br>

            <div class="pack-shop"><a href="#" target="blank">خرید</a></div>
        </div>
        <div class="pack-c">تحویل خودکار بلافاصله پس از پرداخت</div>
    </div>
</div>
</div>

CSS

.div-fix {
    position: fixed;
    z-index: 2147483647;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.69);
    top: 0;
    bottom: 0;
}

.offer-shop  {
    margin-top: 8%;
}

.offer-shop .cur-package {
    float: none;
    background: #3c3c3c;
    min-height: 185px;
    width: 400px;
    margin-right: 0;
    margin-bottom: 0;
    border: 7px solid #B1B1B1;
    border-radius: 5px;
    transition: border .25s ease .0s;
    display: inline-block;
    text-align: right;
    position: relative;
}

.offer-close {
    width: 33px;
    height: 49px;
    position: absolute;
    top: 15px;
    right: -33px;
    background: #c82a00;
    font-size: 28px;
    text-align: center;
    line-height: 51px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    transition: all .3s;

}

.offer-close:hover {
    height: 55px;

}
.pack-c {
    float: right;
    height: 96px;
    width: 128px;
    font-size: 11px;
    font-family: tahoma;
    line-height: 23px;
    padding: 5px 5px 0 0;
}


.pack-b {
    margin: 7px 0px 0px 7px;
    float: left;
}

.cur-package {
    float: right;
    background: #3c3c3c;
    height: 140px;
    width: 22.8%;
    margin-right: 11px;
    margin-bottom: 11px;
    border: 7px solid #323232;
    border-radius: 5px;
    transition: border .25s ease .0s;


}

.cur-package:hover {
    border: 7px solid rgb(87, 87, 87);

}


.cur-package h6{
    font-size: 15px;
    border-bottom: 1px dashed #636363;
    padding: 3px 3px 7px 0;
    margin-bottom: 5px;
}

.cur-package h6::before {
    content: "\f100";
    font-family: FontAwesome;
    padding: 0 4px;
    vertical-align: -2px;
    font-size: 15px;
}

JavaScript

$(document).mouseup(function (e)
    {
        var container = $(".div-fix");

        if (!container.is(e.target)
            && container.has(e.target).length === 0)
        {
            container.hide();
        }
    });