JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-13">
    <div class="list-wrapper">
        <ul class="list row">
            <li class="col-xs-12">
                <table>
                    <tr class="row">
                        <td class="col-xs-8">
                            <div class="item item-1">
                                <div class="text">test1</div>
                            </div>
                        </td>
                        <td class="col-xs-4">
                            <div class="item-name">
                                <div class="text">test11</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </li>
            <li class="col-xs-12">
                <table>
                    <tr class="row">
                        <td class="col-xs-8">
                            <div class="item item-1">
                                <div class="text">test2</div>
                            </div>
                        </td>
                        <td class="col-xs-4">
                            <div class="item-name">
                                <div class="text">test22</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </li>
            <li class="col-xs-12">
                <table>
                    <tr class="row">
                        <td class="col-xs-8">
                            <div class="item item-1">
                                <div class="text">test3</div>
                            </div>
                        </td>
                        <td class="col-xs-4">
                            <div class="item-name">
                                <div class="text">test33</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>
    <div class="show-more...

CSS

.block-13 {
    width: 100%;
    background: #000000;
    text-align: center;
    padding-top: 70px;
}
.block-13 .list-wrapper {
    width: 1000px;
    margin: 10px;
    overflow: hidden;
    position: relative;
}
.block-13 .list {
    width: 999999px;
    position: relative;
}
.block-13 .list li {
    width: 1000px;
    float: left;
    position: relative;
}
.block-13 .list .item {
    width: 650px;
    margin-bottom: 25px;
    position: relative;
    min-height: 140px;
    display: table;
}


.block-13 .list .item-1 {
    background: #69bbc5;
}

.block-13 .list .item-name {
    display: table;
    width: 250px;
}
.block-13 .list .item-name .text {
    display: table-cell;
    vertical-align: middle;
    font: 1.375em/1.25em'pf_handbook_problack';
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
    padding: 0 0 0 20px;
}
.block-13 .button-1 {
    margin-top: 60px;
}
.block-13 .show-more {
    background: url() 0% 0% no-repeat;
    width: 205px;
    height: 44px;
    margin: 40px auto 0 auto;
    cursor: pointer;
    display: block;
    color: #fff;
}

JavaScript

var width = $('.block-13 .list li').width();

function carouselNext() {

    $('.block-13 .list').animate({
        right: '+=' + width
    }, 1000, function () {

        var first = $('.block-13 .list li:first-child');
        first.remove();
        $(this).append(first);

        $(this).css({
            right: '-=' + width
        });
    });
}


$('.block-13 .show-more.prev').click(function () {
    var last = $('.block-13 .list li:last-child');
    last.remove();
    $('.block-13 .list').prepend(last);
    
    $('.block-13 .list').css({
        right: '+=' + width
    });
    
    $('.block-13 .list').animate({
        right: '-=' + width
    });

});

$('.block-13 .show-more.next').click(function () {
    carouselNext();
});