JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
    <div class="seven">7</div>
</div>

CSS

.container{height: 700px; width: 525px;}
div div{background: #000; float: left; height: 100px; margin: 0 5px 5px 0; width: 100px;color:white;}

.one{height: 205px; width: 310px}
.two{width: 205px;}
.three{float: right; height: 205px; width: 205px;}
.four{width: 205px; height: 205px}
.seven{width: 205px;}