JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
      <span class="left-top"></span>
      <span class="right-top"></span>
      <span class="left-bottom"></span>
      <span class="right-bottom"></span>
    </div>

CSS

html{
height:100%;
}

body{
margin:0;
padding:0;
height:100%;
}

.wrap{
margin:50px auto;
background:#fff;
position:relative;
border:3px solid #47553d;
background:#fafad6;
width:700px;
height:100%;
}

span{
display:block;
position:absolute;
width:100px;
height:100px;
background:#222;
}

.left-top{
top:0;
left:0;
}

.right-top{
top:0;
right:0;
}

.left-bottom{
bottom:0;
left:0;
}

.right-bottom{
bottom:0;
right:0;
}