JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="panel panel-default panel-info">
    <div class="panel-heading">Latest Run</div>
    <div class="panel-body">
        <div class="testsuite testsuite-success col-md-2">
            <a data-toggle="collapse" href="#collapse1">
             <div class="testsuite-heading">Test Suite 1</div>
            </a>
            <div id="collapse1" class="testcase-container collapse">
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
            </div>
        </div>
        
        <div class="testsuite testsuite-success col-md-2">
                        <a data-toggle="collapse" href="#collapse2">
             <div class="testsuite-heading">Test Suite 2</div>
            </a>
            <div id="collapse2" class="testcase-container collapse">
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
                <div class="testcase testcase-success">&nbsp;</div>
            </div>
        </div>
        
        <div class="testsuite testsuite-success col-md-2">
                        <a data-toggle="collapse" href="#collapse3">
             <div class="testsuite-heading">Test Suite 3</div>
            </a>
            <div id="collapse3" class="testcase-container collapse">
                <div class="testcase...

CSS

.testsuite {
    margin-bottom: 5px;
}

.testsuite  .testsuite-heading
{
    border: 1px solid black;
    border-radius: 4px;
    width: auto;
    padding: 5px;
    margin: 2px;
    display: inline-block;
}

.testcase-container > .testcase
{
    border: 1px solid black;
    border-radius: 4px;
    width: 25px;
    height: 25px;
    padding: 5px;
    margin: 2px;
    display: inline-block;
}

.testsuite-success .testsuite-heading,
.testcase.testcase-success
{
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.testsuite-failure .testsuite-heading,
.testcase.testcase-failure
{
  color: #b94a48;
  background-color: #f2dede;
  border-color: #ebccd1;

}

.testcase.testcase-error
{
  color: #ffffff;
  background-color: #d9534f;
  border-color: #d9534f;

}