JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myshop-wrap">
    <div id="checkout-top">Check</div>
    <div id="fill">fill</div>
    <div id="basket-page">basket page content</div>
</div>

CSS

div#checkout-top {
    background:blue;
}
div#fill {
    height:400px;
}
div#basket-page {
    background:red;
}

JavaScript

jQuery(document).mouseup(function (e) {
    var container = jQuery("#basket-page");
    var checkoutcontainer = jQuery('#checkout-top');
    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0 && !checkoutcontainer.is(e.target)) // ... nor a descendant of the container
    {
        container.fadeOut(1000);
    }
});

jQuery('#checkout-top').click(function () {
    //var basket_page=jQuery('#basket-page');
    //jQuery('#top_basket').html(basket_page);

    var position = jQuery("#myshop_wrap").position();
    scroll(0, position.top);
    jQuery('#basket-page').show();
});