JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<div id="slider-nav" class="slidernav visible">
    <div id="slider-overflow" class="row nowrap">
        <div class="slider-mover">
            <ul class="slider-nav-items standards-links clear">
                <li> <a href="javascript:void(0)" class="programs selected">Promotions</a>

                </li>
                <li> <a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li> <a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li> <a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li> <a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li> <a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li> <a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

                </li>
                <li><a href="javascript:void(0)" class="programs">WW UAT TEST CONFIGS</a>

       ...

CSS

#slider-nav {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 0;
    float:left;
}
#slider-nav .slider-nav-items .selected a {
    color:black;
}
#slider-nav .slider-mover {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    padding: 0 0 .9em 0;
}
#slider-nav .slider-nav-items {
    position: relative;
    display: block;
    float: left;
    background:green;
}
#slider-overflow {
    border-bottom: 1px solid #ccc;
    padding: 0 1.25em;
}
.nowrap {
    white-space:nowrap;
}
li {
    display: inline;
    width: auto;
    margin: 1em 2em 1em 0;
    float: none;
    text-decoration:none;
    color:green;
}
li a {
    text-decoration: none;
    padding: 1em;
    display: inline-block;
    line-height: 1.2;
    vertical-align: top;
    white-space: normal;
    max-width: 16em;
    font-size: .85em;
    margin: 0 1em;
    color: #0096D6;
    font-family:"HPSimplifiedBold";
}
.slidernav {
    border:2px solid red;
}
.visible {
    overflow:visible;
}

JavaScript

//alert("ul width: " + $("ul").width());
var m = 0;
$("ul li").each(function () {
    m += $(this).width()
});
//alert(m);