JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<div class="section-tertiary width-724">
                                    <div class="scroller">
                                        
                                        <div class="content-item update">
                                            <div class="promo-block">
                                                <div class="promo-heading">
                                                    <h3 class="heading">Content Item 1</h3>
                                                </div>
                                                <div class="promo-image"><img width="212" height="131" src="http://placehold.it/212x131"></div>
                                            </div>
                                        </div>
                                        <div class="content-item update">
                                            <div class="promo-block">
                                                <div class="promo-heading">
                                                    <h3 class="heading">Content Item 2</h3>
                                                </div>
                                                <div class="promo-image"><img width="212" height="131" src="http://placehold.it/212x131"></div>
                                            </div>
                                        </div>
                                        <div class="content-item update">
                                            <div class="promo-block">
                                                <div class="promo-heading">
                                                    <h3 class="heading">Content Item 3</h3>
                                                </div>
                                                <div class="promo-image"><img width="212" height="131" src="http://placehold.it/212x131"></div>
                                            </div>
                                        </div>
                             ...

CSS

body { padding: 10px; }
.section-tertiary { background: #ffd100; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; width: 100%; }
.section-tertiary.width-724 { width: 724px; }
.section-tertiary .content-item { display: inline-block; }
.section-tertiary .content-item:last-child .promo-block { border-right: none; }
.section-tertiary .content-item .promo-block .promo-heading { height: 25px; line-height: 25px; }
.section-tertiary .content-item .promo-block .promo-heading h3 { font-size: 16px; }
.section-tertiary .content-item .promo-block .promo-text { height: 31px; line-height: 31px; }
.section-tertiary .content-item .update { right: 6px; top: 6px; }    
.section-tertiary .content-item .percent { right: 26px; top: 7px; }
.scroller { background: #006685; color: #fff; float: left; position: relative; /* height: 131px; */ overflow-x: scroll; overflow-y: hidden; width:1080px; -webkit-overflow-scrolling: touch; }

JavaScript

$('.section-tertiary').scroll(function() {
    var $ul = $(this);
    $ul.find('.content-item').each(function(n) {
        var $this = $(this);
        $this.live('click', function() {
            if ($this.position().left > 635) {
                $ul.animate({
                    scrollLeft: '+=190'
                });
            }
        });
    });
});