JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="home_cta_container">
<div class="home_cta hc1"><div class="home_cta_item"><h2>Title – Second Title</h2>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p></div></div>
<div class="home_cta hc2"><div class="home_cta_item"><h2>Title – Second Title</h2>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p></div></div>
</div>

<div class="home_cta_container">
<div class="home_cta hc3"><div class="home_cta_item"><h2>Title – Second Title</h2>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p></div></div>
<div class="home_cta hc4"><div class="home_cta_item"><h2>Title – Second Title</h2>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p>
<p>Donec convallis vitae mi nec ultricies.</p></div></div>
</div>

CSS

.home_cta_container {display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-content: stretch;align-content: stretch;}
    
.home_cta {width:50%; display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: center;justify-content: center;-webkit-align-content: stretch;align-content: stretch;-webkit-align-items: center;align-items: center;}
    
.home_cta_item {margin:50px 0;width:300px;}
    
.hc1 {background-color:lightBlue;}
.hc2 {background-color:lightGreen;}
.hc3 {background-color:lightGreen;}
.hc4 {background-color:lightBlue;}

@media screen and (max-width: 640px) {
.home_cta_container {-webkit-flex-direction: column;flex-direction: column;}
.home_cta {width:100%;}
.hc3 {background-color:lightBlue;}
.hc4 {background-color:lightGreen;}
.home_cta_item {margin:0;}
}