JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
        <div class="greenBG"></div>
        <div class="blueBG"></div>
</div>

CSS

#container {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.greenBG {
    background: green;
    position: absolute;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}

.blueBG {
    background: blue;
    position: absolute;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg);
}

JavaScript

$(document).ready(function() {
    var wH = $(window).height(),
        wW = $(window).width(),
    	offset = wW/2, 
        diagonal = Math.sqrt(wH*wH + wW*wW),
        diagonalMid = diagonal/2;
    
    	console.log('wH',wH);
    	console.log('wW',wW);
        console.log('diagonal',diagonal);
        console.log('diagonalMid',diagonalMid);
    	console.log('offset',offset);

    $('.greenBG').css({
        height: wW + 'px',
        width: wW + 'px',
        left: '-'+offset+'px',
        top: '-'+offset+'px'
    });
    $('.blueBG').css({
        height: wW + 'px',
        width: wW + 'px',
        right: '-'+offset+'px',
        bottom: '-'+offset+'px'
    });


});