JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div-left">
    <div class="image">
          Image 1
    </div>
    <div class="image">
          Image 2
    </div>
    <div class="image">
          Image 3
    </div>
</div>
<div id="div-center">
    <div class="image big">
         Image 4
    </div>
    <div class="image small">
         Image 5
    </div>
</div>
<div id="div-right">
    <div class="image">
         Image 6
    </div>
    <div class="image">
         Image 7
    </div>
    <div class="image">
         Image 8
    </div>
</div>

CSS

.image{
    height: 100px;
    line-height: 100px;/*Somente para colocar o label no centro*/
    border: 1px solid; /*So para delimitar as div visualmente*/
    text-align: center;/*Somente para colcoar o label no centro*/
}

.big{
    height: 250px;
    line-height: 250px;/*Somente para colocar o label no centro*/
}

.small{
    height: 50px;
    line-height: 50px;/*Somente para colocar o label no centro*/
}

#div-left, #div-center, #div-right{
    float:left;
}

#div-left, #div-right{
    width: 20%;
}

#div-center{
    width: 60%;
}