JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<div class="container" data-masonry='{ "itemSelector":".col-sm-4", "fitWidth": true }'>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        Content
        <button class="btn btn-default">
          Hello
        </button>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div class="panel-heading sas-heading-green" xng-class="{1:'sas-heading-green',2:'sas-heading-orange',0:'sas-heading-red'}[innercount % 3]">
        <h3 class="panel-title">Title</h3>
      </div>
      <div class="panel-body">
        <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
      </div>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="panel panel-default">
      <div...