JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<div class="breadcrumb">
    
    <div class="stage">
        <span class="stage-name">text</span>
    </div>
    <div class="stage">
        <span class="stage-name">text</span>
    </div>
    <div class="stage">
        <span class="stage-number">1</span>
        <span class="stage-name">text</span>
    </div>
    <div class="stage">
        <span class="stage-number">2</span>
        <span class="stage-name">text</span>
    </div>
    <div class="stage">
        <span class="stage-name">text</span>
    </div>
    
</div>

CSS

.breadcrumb {
    height: 49px;
    border: 1px solid red;
    margin-bottom: 20px;
    width: 100%;
    overflow:hidden
}

.stage {
    border: 1px solid green;
    margin: 0px;
    padding: 0px 15px;
    box-sizing: border-box;
    width: 20%;
    height: 100%;
    float:left;
    display:inline-block;
}