JSFiddle - React, Tailwind, and code Playground
HTML
<div class="out-wrapper">
<div class="inner-wrapper">
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
<a class="nav-link pull-left" href="#">Nav 1</a>
</div>
</div>
CSS
.out-wrapper{
overflow-x: scroll;
overflow-y:hidden;
}
.inner-wrapper{
}
.nav-link{
padding: 10px;
}
JavaScript
var container_width = 0;
$('.inner-wrapper a').each(function() {
container_width += $(this).outerWidth( true );
});
$(".inner-wrapper").css("width", container_width + 250);
console.log(container_width);