JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

<DIV id=legend>
    <DIV class=legendUnit>
        <DIV class="critical fa-stack">
            <I class="fa fa-stack-2x fa-square"></I>
            <I class="fa fa-stack-1x fa-asterisk"></I>
        </DIV>: Critical Path </DIV>
    <DIV class="legendUnit step_done">Done </DIV>
    <DIV class="legendUnit step_ip">In progress </DIV>
    <DIV class="legendUnit step_pending">pending </DIV>
    <DIV class="legendUnit step_waiting">waiting </DIV>
</DIV>



<DIV class="step step_done criticalStep">
    <DIV class=criticalIcon>
        <DIV class=fa-stack>
            <I class="fa fa-stack-2x fa-square"></I>
            <I class="fa fa-stack-1x fa-asterisk"></I>
        </DIV>
    </DIV>
    <SPAN class=stepTitle>Step 1</SPAN>
    <P>ET : 1<BR>TS : 3 (-2)</P>
</DIV>

CSS

/* legend */
#legend {
    padding: 4px 4px 4px 2px;
    border: 1px dashed black;
    display: inline-block;
}
.legendUnit {
    height: 19px;
    display:inline-block;
    padding: 2px 3px;
    font-weight: bold;
}

/* critical path */
.critical {
    /* solve trouble with positionning */
    top : -2px;
    display: inline;
    font-size: 0.8em;
}

    .critical .fa-asterisk {
        color: red;
    }
    
/* step status */
.step_done {
    background: #00c81a;
}
/* step status */
.step_ip {
    background: #8f00ff;
}
/* step status */
.step_pending {
    background: #ff6a00;
}
/* step status */
.step_waiting {
    background: #808080;
}

#workflow {
    display: inline;
    overflow: hidden;
}

.stepRow {
    display: inline-block;
    vertical-align:middle;
}

.step {
    margin: 5px;
    border: 2px solid black;
    padding: 5px;
    text-align: left;
}

.stepTitle {
    text-align: center;
    font-weight: bold;
    display: block;
    padding: 0 5px;
    white-space: nowrap;
}

.criticalStep .stepTitle {
    margin-left: 15px;
}

.criticalIcon {
    float:left;
    position:relative;
    left: -7px;
    top: -8px;
    font-size: 0.8em;
    display : inline;
}
    .criticalIcon .fa-asterisk {
        color: red;
    }

.step p {
    margin: 3px 0;
}