JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container cf">
    <div class="block one">1
        <div class="block two">image</div>
    <div class="block three">text text text</div>

    </div>
    
</div>

CSS

/*-------------------- clearfix --------------------- */
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/*-------------------- main --------------------- */
.container {
   max-width: 981px;
   padding: 2%;
}
.block {
    font-family: sans-serif;
    color: #fff;
    background-color: grey;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}
.one {
    float: left;
    width: 100%;
    height: 150px;
    margin: 2%;
}
.two {
    float: left;
    width: 100%;
    height: 250px;
    margin: 2px;
    background-color: green;
}
.three {
    float: left;
    clear: left;
    width: 30%;
    height: 450px;
    margin-right: 2%;
}
.four {
    float: right;
    width: 67%;
    height: 250px;
}
.five {
    float: right;
    width: 67%;
    height: 250px;
}
.six {
    float: right;
    width: 67%;
    height: 200px;
}
.seven {
    float: left;
    width: 30%;
    height: 150px;
    margin-right: 2%;
}
.eight {
    float: left;
    width: 30%;
    height: 75px;
    margin-right: 2%;
}

/* 678 breakpoint ----------- */
@media only screen 
and (max-width : 678px) {
    .block {
        width: 100% !important;
        float: none !important;
    }
}