JSFiddle - React, Tailwind, and code Playground

HTML

<br>
<div class="row-fluid">
    <ul id="wizard-view-tabs2" class="chevronbar">
        <li class="first" name="Run-Parameters">
            <a class="" href="#">Run Parameters</a>
        </li>
        <li class="active">
            <a class="" href="#Application" title="Application">Application</a>
        </li>
        <li class=""  class="">
            <a class="" href="#Kits" title="Kits">Kits</a>
        </li>
        <li class=""  class="">
            <a class="" href="#Monitoring" title="Monitoring">Monitoring</a>
        </li>
        <li class=""  class="">
            <a class="" href="#Reference/Region" title="Reference/Region">Reference/Region</a>
        </li>
        <li class=""  class="">
            <a class="" href="#Plugins" title="Plugins">Plugins</a>
        </li>
        <li class="last"  class="active">
            <a class="" href="#Output" title="Output">Output</a>
        </li>
    </ul>
</div>

CSS

<style type="text/css">
    ul.chevronbar {
        list-style: none;
        padding: 0;
        margin: 0;
        margin: 0 0 0px;
        height: 38px;
        border: 1px solid #222;
        border-radius: 5px;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
    }

    ul.chevronbar li {
        float: left;
        text-align: center;
        vertical-align: top;
        position: relative;
        background: #666;
        color: #fff;
        display: inline;
        border: none;
        margin-right: 17px;
    }

    ul.chevronbar li a {
        line-height: 38px;
        text-decoration: none;
        padding: 5px;
        color: #fff;
    }

    ul.chevronbar li:before, ul.chevronbar li:after {
        content: ' ';
        height: 0;
        position: absolute;
        width: 0;
        border: 19px solid transparent;
        border-left-width: 8px;
        border-right-width: 8px;
        top: 0;
    }
    

    ul.chevronbar li:before {
        border-top-color: #666;
        border-bottom-color: #666;
        border-right-color: #666;
        right: 100%;
    }

    ul.chevronbar li:after {
        border-left-color: #666;
        left: 100%;
    }

    ul.chevronbar li.first {
        
    }

    ul.chevronbar li.first:before {
        border: none !important;
    }

    ul.chevronbar li.last:after {
        border: none !important;
    }
    ul.chevronbar li.active {
        background: #0064cd;
    }
    ul.chevronbar li.active:before {
        border-top-color: #0064cd;
        border-bottom-color: #0064cd;
        border-right-color: #0064cd;
        right: 100%;
    }
    ul.chevronbar li.active:after {
        border-left-color: #0064cd;
        left: 100%;
    }
</style>

JavaScript

$('.chevronbar li').css('width', 99.0 / ($('.chevronbar li').length * 1.0) + "%");