JSFiddle - React, Tailwind, and code Playground

by Nicholas Pappas

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
  <div class="row tput-text-stat-container">
    <div class="col-md-2 tput-stat-cell">
      <div class="row">
        <div class="col-md-4 stat-label">In</div>
        <div class="col-md-8 stat-value" id="tput_bytes_in"></div>
      </div>
      <div class="row">
        <div class="col-md-4 stat-label">Out</div>
        <div class="col-md-8 stat-value" id="tput_bytes_out"></div>
      </div>
      <div class="row">
        <div class="col-md-12 tput-stat-label">Total Throughput</div>
      </div>
    </div>

    <div class="col-md-2 tput-stat-cell">
      <div class="row tput-stat-entry">
        <div class="col-md-4 stat-label">In</div>
        <div class="col-md-8 stat-value" id="clientbytesin">9999</div>
      </div>
      <div class="row tput-stat-entry">
        <div class="col-md-4 stat-label">Out</div>
        <div class="col-md-8 stat-value" id="clientbytesout">9999</div>
      </div>
      <div class="row">
        <div class="col-md-12 tput-stat-label">Client</div>
      </div>
    </div>

    <div class="col-md-2 tput-stat-cell">
      <div class="row tput-stat-entry">
        <div class="col-md-4 stat-label">In</div>
        <div class="col-md-8 stat-value" id="serverbytesin">9999</div>
      </div>
      <div class="row tput-stat-entry">
        <div class="col-md-4 stat-label">Out</div>
        <div class="col-md-8 stat-value" id="serverbytesout">9999</div>
      </div>
      <div class="row">
        <div class="col-md-12 tput-stat-label">Server</div>
      </div>
    </div>

    <div class="col-md-2 tput-stat-cell">
      <div class="row tput-stat-entry">
        <div class="col-md-4 stat-label">In</div>
        <div class="col-md-8 stat-value" id="pTputIn"></div>
      </div>
      <div class="row tput-stat-entry">
        <div class="col-md-4 stat-label">Out</div>
        <div class="col-md-8 stat-value" id="pTputOut"></div>
 ...

CSS

.stat-value {
  font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
  font-size: 28px;
  font-stretch: normal;
  font-weight: 200; }

.stat-label, .tput-stat-label {
  font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
  font-size: 14px;
  font-stretch: condensed;
  font-weight: 600;
  text-transform: uppercase; }

.tput-stat-label {
  text-align: center; }

.tput-text-stat-container {
  margin-top: 10px; }
  .tput-text-stat-container .tput-stat-cell {
    border-right: 1px solid #000; }
    .tput-text-stat-container .tput-stat-cell .tput-stat-entry {
      background-color: red;
      margin-left: 1px; /* OFFENDING MARGIN */
      border: 1px solid #fff;
      border-radius: 4px;
      cursor: pointer; }
      .tput-text-stat-container .tput-stat-cell .tput-stat-entry:hover {
        border-color: #000; }