JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title> Expiremental Design Layout thing</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>

<div id="body_container">
    <div id="topRight">
        <div class="TLContentContainer">
            <div class="siteName">
                Site Name
            </div>
        </div>
    </div>
    
    <div id="topLeft">
        <div class="TLContentContainer">
            Sep 23, 2010
        </div>
    </div>
    
<div id="botRight">
    Links here?
</div>
    <div id="botLeft">
        Herro
    </div>

</div>
</body>

    </html>

CSS

body{
    font-size: 50px;
}
#body_container{
    -webkit-transform:rotate(0deg);
    position:  absolute;
    top:  100px;
    left: 0px;
    height:  1000px;
    width:  1000px;
    z-index: 0;
}
#topLeft{
    position: absolute;
    left:  00%;
    top:  50%;
    width:  50%;
    height:  50%;
    background: #5496D7;
    border: 1px solid black;
}
#topRight{
    position: absolute;
    top:  0%;
    right: 50%;
    width:  50%;
    height:  50%;
    background: #D75496;
    border: 1px solid black;
}
#botLeft{
    position: absolute;
    bottom: 0%;
    right: 0%;
    width:  50%;
    height:  50%;
    background: #54D749;
    border: 1px solid black;
    z-index: 2;
}

#botRight{
    position: absolute;
    bottom:  50%;
    right:  00%;
    width:  50%;
    height:  50%;
    background: #d7D749;
    border: 1px solid black;
    z-index: 2;
}

.TLContentContainer{
    position: absolute;
    bottom:  0px;
    right:  0px;
    text-align: right;
    height:  100%;
    width:  100%;
}

#topRight .TLContentContainer{
    height:  100%;
    width:  100%;
    -webkit-transform:rotate(90deg);
}

#topRight .siteName{
    -webkit-transform:rotate(180deg);
    text-align: left;
}