JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div class="container blog-page-container">
<div class="col-md-4">
<div class="col-md-12">
<div class="testimonial-background">
<div class="testimonial-text">
<span>
<i class="fas fa-quote-left fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. </p>
<p><strong>Post 1</strong></p>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="testimonial-background">
<div class="testimonial-text">
<span>
<i class="fas fa-quote-left fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor, tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
<p><strong>Post 4</strong></p>
</span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="testimonial-background">
<div class="testimonial-text">
<span>
<i class="fas fa-quote-left fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor, tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.</p>
<p><strong>Post 7</strong></p>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="col-md-12">
<div class="testimonial-background">
<div class="testimonial-text">
<span>
<i class="fas fa-quote-left fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consectetur adipiscingelit. Nam velit dolor, tincidunt cursus nisl eget, auctor vehicula sem. Aliquam eget nunclacinia, pulvinar erat eget, finibus mauris.
...
CSS
.col-md-12 {
width: 100%;
float: left;
}
.col-md-4 {
width: 33.33333333%;
float: left;
}
.testimonial-background {
margin-top: 0;
margin-bottom: 20px;
padding-left: 20px;
}
.testimonial-text {
color: #fff;
background-color: #4E0B1C;
padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 40px;
}
.testimonial-text-opposite {
color: #4E0B1C;
background-color: #fff;
border: 1px solid #4E0B1C;
}
JavaScript
$('.testimonial-text:odd').addClass("testimonial-text-opposite");