JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'> 
<a class='pipeline-stats-graph'>
     <span class='pipeline-bucket-segment' style="width: 40%;" id='first_contact_segment'></span><span class='pipeline-bucket-segment' style="width: 30%;" id='actively_engaged_segment'></span><span class='pipeline-bucket-segment' style="width: 20%;" id='proposal_provided_segment'></span><span class='pipeline-bucket-segment' style="width: 3%;" id='periodic_followup_segment'></span><span class='pipeline-bucket-segment' style="width: 7%;" id='awaiting_activity_segment'></span>
</a>
</div>
<hr>
<div class='container'> 
<a class='pipeline-stats-graph'>
    <span class='pipeline-bucket-segment' style="width: 40%;" id='first_contact_segment'></span>
    <span class='pipeline-bucket-segment' style="width: 30%;" id='actively_engaged_segment'></span>
    <span class='pipeline-bucket-segment' style="width: 20%;" id='proposal_provided_segment'></span>
    <span class='pipeline-bucket-segment' style="width: 3%;" id='periodic_followup_segment'></span>
    <span class='pipeline-bucket-segment' style="width: 7%;" id='awaiting_activity_segment'></span>
</a>
</div>

SCSS

.container {
    width: 100%;
    height: 30px;
}
.pipeline-stats-graph {
  width: 100%;
  line-height: 20px;

  .pipeline-bucket-segment {
    margin: 0;
    padding: 0;
    display: inline-block;
    box-sizing: border-box;
    text-indent: -9999px;
    height: 100%;
    width: 20%;
    &#first_contact_segment     { background: blue;   }
    &#actively_engaged_segment  { background: red;    }
    &#proposal_provided_segment { background: yellow; }
    &#periodic_followup_segment { background: green;  }
    &#awaiting_activity_segment { background: black;  }
  }
}