JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="top-center">1 - Top Center</div>
    <div class="top-left">2 - Top Left</div>
    <div class="top-right">3 - Top Right</div>
    <div class="mid-center">4 - Middle Center</div>
    <div class="mid-left">5 - Middle Left</div>
    <div class="mid-right">6 - Middle Right</div>
    <div class="bottom-center">7 - Bottom Center</div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

div {
    padding: 10px;
}

.container {
    width: 95%;
    max-width: 700px;
    margin: 0 auto;
    outline: 1px solid black;
    overflow: auto;
}

.top-center {
    float: left;
    width: 55%;
    margin-left: 25%;
    
    margin-bottom: 10px;
}

.top-left {
    float: left;
    width: 25%;
    margin-left: -80%;
    
    margin-bottom: 30px;
}

.top-right {
    float: right;
    width: 20%;
    
    margin-bottom: 40px;
}

.mid-center {
    float: right;
    width: 55%;
}

.mid-left {
    float: left;
    width: 25%;
}

.mid-right {
    float: right;
    width: 20%;
    margin-right: -75%;
}

.bottom-center {
    float: left;
    width: 55%;
    margin-left: 25%;
}

JavaScript

$('.top-center').css({
  'background-color': '#FFBD90',
  'color': 'blue',
  'min-height': '50px',
  'outline': '2px solid blue'
});
$('.top-left').css({
  'background-color': '#9CB3AE',
  'color': 'red',
  'min-height': '200px',
  'outline': '2px solid red'
});
$('.top-right').css({
  'background-color': '#E5FAE1',
  'color': 'green',
  'min-height': '120px',
  'outline': '2px solid green'
});
$('.mid-center').css({
  'background-color': '#E3DECC',
  'color': 'purple',
  'min-height': '200px',
  'outline': '2px solid purple'
});
$('.mid-left').css({
  'background-color': '#B3AEA1',
  'color': 'midnightblue',
  'min-height': '75px',
  'outline': '2px solid midnightblue'
});
$('.mid-right').css({
  'background-color': '#CFC8DE',
  'color': 'brown',
  'min-height': '100px',
  'outline': '2px solid brown'
});
$('.bottom-center').css({
  'background-color': '#f8ecce',
  'color': 'goldenrod',
  'min-height': '100px',
  'outline': '2px solid goldenrod'
});