JSFiddle - React, Tailwind, and code Playground

HTML

<div id="large">
    <p class="turnon">Проекты частных коттеджей</p>
    <div id="cover">
        <div class="lightbox">
            <p class="close">[X]</p>
        </div>
        <div id="screen"></div>
    </div>
</div>

CSS

#large{position:absolute;overflow-x:hidden;width:100%;background-color:#ece9e2;}
#thumbs *{text-align:center;}
#screen{background-color:#eaa;position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;}
.lightbox{width:100%;height:100%;position:fixed;z-index:2;}
.close{position:absolute;top:-15px;left:5px;}
#cover{opacity:0;display:none;}

JavaScript

$('.turnon').click(function() {
    $('#cover').css('display', 'block').animate({
        'opacity': '1'
    }, {
        duration: 300,
        complete: function() {
            $('#screen').animate({
                'opacity': '0.8'
            }, 300);
        }
    });
});
$('.close').click(function() {
    $('#cover').animate({
        'opacity': '0'
    }, {
        duration: 300,
        complete: function() {
            $(this).css('display', 'none');
        }
    });
    $('#screen').animate({
        'opacity': '1'
    }, {
        duration: 300,
        queue: false
    });
});