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/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 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 cwidth = parseInt($('#container').width());
var lastElement = $('#container .element:first');
$("#container .element:not(:first)").each(function(){
var rightOffset = $(this).offset().left
+ parseInt($(this).width())
+ parseInt($(this).css('padding-left'))
+ parseInt($(this).css('padding-right'))
+ parseInt($(this).css('margin-left'))
+ parseInt($(this).css('margin-right'));
if (rightOffset > cwidth){
return false;
}
lastElement = $(this);
});
lastElement.addClass("lastvisible")