JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxesHolder">
    <div class="boxes stand fLeft">1</div>
    <div class="boxes large fRight">2</div>
    <div class="boxes stand fLeft">4</div>
    <div class="boxes large fRight">5</div>
    <div class="boxes stand fLeft">6</div>
    <div class="boxes stand fLeft">7</div>
    <div class="clear"></div>
</div>

CSS

.boxesHolder {
       width:970px;
       border:1px solid green;
       margin-left:auto;
       margin-right:auto;
       background-color:#06C;
   }
   .boxes {
       border:1px solid blue;
       margin:5px;
       background-color:#FFF;
   }
   .stand {
       width:230px;
       height:180px;
   }
   .large {
       width:474px;
       height:372px;
   }
   .tall {
       width:230px height:372px;
   }
   .fLeft {
       float:left;
   }
   .fRight {
       float:right;
       clear:right
   }
   .clear {
       clear:both;
   }
   div div:before {
       content:attr(class);
   }
   div:nth-child(4), div:nth-child(5) {
       float:none;
       display:inline-block;
       margin:5px 3px;
   }