JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/130x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/100x50" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
<div class="element">
<img src="http://placehold.it/150x150" alt=""/>
</div>
</div>
CSS
#container {
white-space:nowrap;
overflow: hidden;
}
.element {
display: inline-block;
vertical-align:top;
}
.element.lastvisible {
border:5px solid red;
box-sizing:border-box;
}
JavaScript
var vwidth = $(window).width();
$(".element").each(function(){
var eleft = $(this).offset().left
var ewidth = $(this).width()
var total = eleft + ewidth
if (total < vwidth) {
that = $(this);
}
});
that.addClass("lastvisible")