JSFiddle - React, Tailwind, and code Playground

by Joel Garcia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
div.container>(div.row>div.col-xs-6.bg-$*2)+(div.row>div.col-xs-6.bg-$@3*2)


<div class="container">
  <div class="row">
    <div class="col-xs-6 bg-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga voluptates, sit magnam nesciunt corporis eligendi quaerat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt quibusdam autem illum animi sapiente quia fugit quam repellat ducimus dolorem! Autem quam, voluptatibus distinctio aspernatur omnis sequi ab dicta. Error.illo id exercitationem numquam amet, sapiente, itaque quam alias tenetur sint libero molestiae excepturi.</div>
    <div class="col-xs-6 bg-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga voluptates, sit magnam nesciunt corporis eligendi quaerat illo id exercitationem numquam amet, sapiente, itaque quam alias tenetur sint libero molestiae excepturi.</div>
  </div>
  <div class="row">
    <div class="col-xs-6 bg-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iste accusantium, accusamus eaque praesentium id fuga deleniti odit veritatis nostrum quod magnam tempora itaque asperiores, eius nam maxime. Esse, placeat!</div>
    <div class="col-xs-6 bg-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut iste accusantium, accusamus eaque praesentium id fuga deleniti odit veritatis nostrum quod magnam tempora itaque asperiores, eius nam maxime. Esse, placeat!</div>
  </div>
</div>

CSS

div[class*="bg-"] {
  color: #FFF
}
.bg-1 {
  background: #333
}
.bg-2 {
  background: #CCC
}
.bg-3 {
  background: #F22
}
.bg-4 {
  background: #C2C
 }