JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="square"/>
</div>

CSS

*{box-sizing:border-box;}
.container{
    display:block;
    background:#f2f2f2;
}

.square{
    width:50%;
    padding-top:50%;
    margin: auto;
    background:#e5e5e5;
}
div{
    border: 1px solid black;
}

body{
    overflow:hidden;
    width:100%;
    height: 100%;
    padding:0px;
    margin:0px;
}