JSFiddle - React, Tailwind, and code Playground

HTML

<body>



<div id="wrapper">
    <div id="bg_top"></div>
    <div id="bg_bottom">
</div>
</div>



<footer>
</footer>
</body>

CSS

#wrapper{
    width: 925px;
    height: 1355px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border:1px dashed green;
}

#bg_top{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    border:1px solid red;
    z-index: -1;
}

#bg_bottom{

    width: 500px;
    height: 500px;
    position: absolute;
    
    float: right;
    bottom: 0px;
    right: 0px;
    border:1px solid teal;
    z-index: -1;
}