JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" id="btn" data-toggle="modal" data-target="#myModal">Show modal</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg" style="width: 90%">
        <div class="modal-content">
            <div class="modal-body">
                <div>
                    <div class="projectStatusActionGrid">
                        <label>Project Status</label>
                        <label class="projectStatusActionGrid-right">
                            <label id="infoLabelId"></label>
                            <label id="proposedDeadlineByVendor"></label>
                            Action(s):
                            <label id="sendEmailToProofId"></label>
                            <label id="acceptNewDeadlineFromVendor"></label>
                            <label id="actionStatusLabelId"></label>
                            <label id="cancelProjectLabelId" style="color: red; cursor: pointer">
                                CANCEL PROJECT
                            </label>
                        </label>
                    </div>
                    <div>
                        <ul class="progressbar">
                            <li >
                                First status
                            </li>
                            <li >
                                Second status
                            </li>
                            <li >
                                Third status
                            </li>
                            <li >
                                Fourth status
                            </li>
                            <li >
                                Fifth status
                            </li>
                        </ul>
                    </div>
...

CSS

.progressbar {
    counter-reset: step;
    font-size: 16px;
    color: #a697a8;
}

    .progressbar li {
        list-style-type: none;
        float: left;
        width: 20%;
        position: relative;
        text-align: center;
        font-weight: bold;
    }

        .progressbar li:before {
            content: counter(step);
            counter-increment: step;
            width: 40px;
            height: 40px;
            border: 1px solid #ffffff;
            display: block;
            text-align: center;
            margin: 0 auto 10px auto;
            border-radius: 50%;
            line-height: 40px;
            background-color: #a697a8;
            color: #ffffff;
        }

        .progressbar li:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 14px;
            top: 13px;
            left: -50%;
            z-index: -1;
            background-size: 35px 35px;
            background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
            -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
            background-color: #a697a8;
        }

        .progressbar li:first-child:after {
            content: none;
        }

        .progressbar li.active {
            color: #6d9b31;
        }

            .progressbar li.active:before {
                background-color: #6d9b31;
            }

            .progressbar li.active + li:after {
                background-color: #6d9b31;
            }