JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">


<p>1. First, scale the viewport to a medium breakpoint. You'll see that our cards line up neatly in rows of the same height, regardless of their internal content. However, there's no margin between the red card and the black card, so it looks squished.</p>

<p>2. Second, scale the viewport to a small breakpoint. You'll see that the cards collapse into two rows. Same as above - they line up neatly in terms of height, but the margins disappear.</p>



<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#ff0000;">
        Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#00ff00;">
        Test card content. Test card content. Test card content. Test card content. 
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4" style="background-color:#0000ff;">
        Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content. Test card content.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="card h-100 mb-4 text-white" style="background-color:#0f0f0f;">
        Test card content. 
      </div>
    </div>
  </div>
</div>