JSFiddle - React, Tailwind, and code Playground

HTML

<div id='page'></div>

CSS

#page {
    position:relative;
    height:200px;
    width:150px;
    background:blue;
}

JavaScript

var startTop, startLeft;
$('#page').click(function() { // $('.flip').click(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;
    var page = $(this); // $(this).find('.cover').toggleClass('flipped')
    page.toggleClass('clicked'); //.toggleClass('flipped')
    if(page.css('position') == 'relative')
    {
        startTop = 0; // = page.css('top');
        startLeft = 0; // = page.css('left');
        page.css({
            "position":"absolute",
            "top":midHeight,
            "left":midWidth,
            "margin-top":"-100px", // "margin-top":"-300px",
            "margin-left":"-75px" // "margin-left":"-300px"
        });
    }
    else {
        page.css({
            "position":"relative",
            "margin-top":"",
            "margin-left":"",
            "top":startTop,
            "left":startLeft
        });
    }
});
$(window).resize(function() {
    var midHeight = window.innerHeight/2;
    var midWidth = window.innerWidth/2;    
    if($('#page').hasClass('clicked')) // if($('.flipped').length > 0)
    {
        $('#page').css({ // $('.flipped').css({
            "top":midHeight,
            "left":midWidth
        });
    }
});