JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="gsazerimus">Ваше разрешение не соответствует нашему сайту!.<br><br>Текущее:<em><i></i>x<i></i>px</em> рекомендуем от 1024х768px.<br><span>ПРОДОЛЖИТЬ</span></div>

CSS

div#gsazerimus {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    padding-top: 10%;
}
div#gsazerimus em {
    font-style: normal;
    padding-left: 5px;
}
div#gsazerimus em i {
    font-style: normal;
    font-weight: bolder;
}
div#gsazerimus em div {
    color: red;
    display: inline-block;
}
div#gsazerimus span {
    margin-top: 45px;
    display: inline-block;
    font-weight: bold;
    font-family: helvetica, arial, sans-serif;
    color: chartreuse;
    cursor: pointer;
}

JavaScript

function MinScreen() {
var wMinScreen = $(window).width();
var hMinScreen = $(window).height();
if(wMinScreen > 1024) { $('div#gsazerimus em i:eq(0)').html(''+wMinScreen+''); } else { $('div#gsazerimus em i:eq(0)').html('<div>'+wMinScreen+'</div>');	}
if(hMinScreen > 768) { $('div#gsazerimus').hide(); $('div#gsazerimus em i:eq(1)').html(hMinScreen); } else { $('div#gsazerimus em i:eq(1)').html('<div>'+hMinScreen+'</div>'); $('div#gsazerimus').show(); }
}
MinScreen();
$(window).on('resize',function() {
MinScreen();
});
$('div#gsazerimus span').click(function() {
$('div#gsazerimus').remove();
});