JSFiddle - React, Tailwind, and code Playground

HTML

<div id="featured-listing">
    <div class="container">
        <div id="left-arrow"><a href="#"></a></div>
        <div id="right-arrow"><a href="#"></a></div>
        <h2 class="list-cat">Featured Listings</h2>
        <div id="wrap">
         <div id="slides" class="clearfix">
            <div class="slide-item">
                <img alt="" src="http://www.worksheet.16mb.com/images/featyred-img-bg.png">
                <div class="post-entry">
                    <h1><a href="http://www.worksheet.16mb.com/#">Your Listing Title Goes Right Here</a></h1>
                    <span>Posted by Some Person in <em>Some Category</em> on 1-22-10</span>
                    <p>Aliquam tincidunt risus dui, sit am et ferm entum leo. Donec ac urna ac elit fermentum suscipit.
                        Aliquam dapibus lacinia pulvinar. Integer porta nunc ac diam facilisis pretium. Suspendisse potenti.
                        Curabitur ultricies, magna at egestas sollicitudin, mauris urna pharetra orci, sed ultricies enim
                        eros et sapien. Morbi lectus leo, volutpat dignissim ultricies a, faucibus vel dolor. Aliquam tincidunt
                        risus dui, sit am et ferm entum leo. Donec ac urna ac elit fermentum suscipit. Aliquam dapibus lacinia
                        pulvinar. Integer porta nunc ac diam facilisis pretium.Aliquam tincidunt risus dui, sit am et ferm entum
                        leo. Donec ac urna ac elit fermentum suscipit. Aliquam dapibus lacinia pulvinar. Integer porta nunc ac
                        diam facilisis pretium. Donec ac urna ac elit fermentum suscipit. Aliquam dapibus lacinia pulvinar.
                        Integer porta nunc ac diam facilisis pretium.</p>
                </div>
            </div>
            <div class="slide-item">
                <img alt="" src="http://www.worksheet.16mb.com/images/featyred-img-bg.png">
                <div class="post-entry">
                    <h1><a...

CSS

ol, ul {
            margin: 0;
            list-style: none;
            padding: 0;
        }

        @font-face {
            font-family: 'lobster_1.4regular';
            src: url('http://www.worksheet.16mb.com/fonts/lobster_1_4-webfont.eot');
            src: url('http://www.worksheet.16mb.com/fonts/lobster_1_4-webfont.eot?') format('embedded-opentype'),
            url('http://www.worksheet.16mb.com/fonts/lobster_1_4-webfont.woff') format('woff'),
            url('http://www.worksheet.16mb.com/fonts/lobster_1_4-webfont.ttf') format('truetype'),
            url('http://www.worksheet.16mb.com/fonts/lobster_1_4-webfont.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

        #featured-listing {
            width: 100%;
            border-top: 1px solid #EFEFEF;
            border-bottom: 1px solid #EFEFEF;
        }

        #featured-listing .container {
            width: 960px;
            margin: auto;
            position: relative;
        }

        #left-arrow {
            width: 13px;
            float: left;
            height: 100%;
        }

        #left-arrow a {
            display: block;
            position: relative;
            top:50%;
            height: 21px;
            background: url(http://www.worksheet.16mb.com/images/left-arrow.png) no-repeat 0 0;
        }

        #right-arrow {
            width: 13px;
            height: 100%;
            float: right;
        }

        #right-arrow a {
            display: block;
            width: 13px;
            height: 21px;
            position: relative;
            top:50%;
            background: url(http://www.worksheet.16mb.com/images/right-arrow.png) no-repeat 0 50%;
        }

        #slides {
            width: 9999px;
            position: relative;
            left:0;
        }

        .slide-item {
            float: left;
            width: 860px;
        }

        .clearfix:after {
            content:"";
           ...

JavaScript

$(function(){
            var clone, trigger = false;
            var prev = $('#left-arrow a');
            var next = $('#right-arrow a');
            var height = $('#dots').outerHeight(true)+ $('.list-cat').outerHeight(true);
            setHeight();

            function setHeight() {
                $('#wrap').height( $('#slides .slide-item:first').height() );
                var heightItem = height + $('#slides .slide-item:first').height();
                $('.container').height( heightItem );
            }


            next.on('click', function(){
                if( trigger) return false;
                trigger = true;

                clone = $('.slide-item:first').clone();
                $('#slides').append(clone).animate(
                    {
                      left: -clone.width()
                    },
                    400,
                    function(){
                         trigger = false;
                         $('#slides .slide-item:first').remove();
                         $('#slides').css('left', 0);
                         setHeight();
                    }
                );
                return false;
            });

            prev.on('click', function(){
                if( trigger) return false;
                trigger = true;

                clone = $('.slide-item:last').clone();
                $('#slides')
                        .prepend(clone)
                        .css('left', -clone.width())
                        .animate(
                    {
                      left: 0
                    },
                    400,
                    function(){
                         trigger = false;
                         $('#slides .slide-item:last').remove();
                         $('#slides').css('left', 0);
                         setHeight();
                    }
                );
                return false;
            })
        })