JSFiddle - React, Tailwind, and code Playground

by Simon Gough

HTML

<div class="outer padding005">
    <div class="inner-top padding005">
    OLD SNAKE
    </div>
    <div class="inner-progress padding002">
        <div class="progress-fill"></div>
    </div>
    <div class="inner-bottom padding002 clearfix">
        <div class="cell split_25p"></div>
        <div class="cell split_25p"></div>
        <div class="cell split_25p"></div>
        <div class="cell split_25p"></div>
    </div>
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.outer { background-color:#dcd294; width:284px; }
.padding002 { padding:2px; }
.padding005 { padding:5px; }
.split_25p { width:24.7%; }
.inner-top { background-color:#b89343; color:#eee681; font-size:12px; line-height:1; }
.inner-progress { background-color:#b89343; margin:3px 0 0 0; }
.progress-fill { width:80%;background-color:#eee681;height:6px; }
.inner-bottom { background-color:#b89343; padding-top:0; }
.cell { background-color:#eee681;height:3px; float:left; margin-right:1px; }
.cell:last-child { margin-right:0; }