JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<div class="container">
	<div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
	  <div class="col-xl-3 col-md-4 col-sm-6">
	  	<div class="box"></div>
     </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
   </div>
  </div>

CSS

.box {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.2);
}