JSFiddle - React, Tailwind, and code Playground

HTML

<div class="homepageContent">
    <div class="homepageContentBox1">
    Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1
 
    Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1 Box 1      
    </div>
    <div class="homepageContentBox2">
    Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2 Box 2
    </div>
    <div class="homepageContentBox3">
    Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3
      
    Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3 Box 3      
    </div>
</div>

CSS

@media screen and (min-width: 801px) {

    .homepageContent {
        display: flex;
    }

    .homepageContentBox1,
    .homepageContentBox2 {
        margin-right: 14px;
    }

    .homepageContent > div {
        width: 32%;
    }    
  

}

@media screen and (max-width: 800px) {

    .homepageContentBox1,
    .homepageContentBox2 {
        margin-bottom: 14px;
    }

    .homepageContent > div {
        width: 100%;
    }     

}

.homepageContent > div {
    box-sizing: border-box;
    border: 1px solid #000;
    padding: 14px 21px;
    color: #fff;
}

.homepageContentBox1 {
    background: #990000;
}

.homepageContentBox2 {
    background: #009900;
}

.homepageContentBox3 {
    background: #000099;
}