JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="carousel">

    <img src="http://placekitten.com/g/150/200" alt="" />
    <img src="http://placekitten.com/g/150/200" alt="" />
    <img src="http://placekitten.com/g/150/200" alt="" />
    <img src="http://placekitten.com/g/150/200" alt="" />
    <img src="http://placekitten.com/g/150/200" alt="" />
    <img src="http://placekitten.com/g/150/200" alt="" />
    <img src="http://placekitten.com/g/150/200" alt="" />

</div>

CSS

.carousel { 
    width: 100%; 
    height: 150px;
    overflow: hidden;
}

.carousel img { float: left; }

JavaScript

.animate({scrollTop: $('#content-padding').outerHeight() - '200' }, 500, 'easeInQuint');