JSFiddle - React, Tailwind, and code Playground

HTML

<div class="proarena">
    <div class="proarena2">
        <div class="leftpro">click to go left</div>
        <div class="proPartners">
            <table class="Pro" cellspacing="0" style="left: 0px;">
                <tbody>
                    <tr>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                    </tr>
                    <tr>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a href="#">Partners</a>

                        </td>
                        <td><a...

CSS

.proarena {
    background: url(http://i.imgur.com/DiteoVd.png) 50% 100% no-repeat;
    margin: 0px auto;
    padding-bottom: 22px;
    width: 800px;
}
.proarena2 {
    -webkit-box-shadow: rgb(200, 200, 200) 0px 0px 5px;
    background: rgb(245, 245, 245);
    border-radius: 5px;
    box-shadow: rgb(200, 200, 200) 0px 0px 5px;
    height: 100%;
    overflow: hidden;
    padding: 5px;
    width: 100%;
}
.proPartners {
    overflow: hidden;
    width: 800px;
}
.Pro {
    position: relative;
    background: url(http://i.imgur.com/LGTrDgE.png) 50% 0% repeat-y;
    border: 1px solid rgb(210, 210, 210);
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    left: 0px;
    position: relative;
    width: 968px;
}
.Pro tr, .Pro tr td {
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
}
.Pro tr:nth-child(1n):hover td:nth-child(1n) {
    background: rgb(228, 228, 228);
}
.Pro tr td:hover {
    outline: rgb(180, 180, 180) solid 1px;
    background: rgb(255, 255, 255)!important;
}
.Pro tr td {
    background: rgb(248, 248, 248);
    height: 33px;
    line-height: 33px;
    text-align: center;
    width: 88px;
}
.Pro tr:nth-child(2n):hover td:nth-child(2n) {
    background: rgb(228, 228, 228);
}

JavaScript

var $container = $(".proPartners");
var widthOfContainer = $container.width();
var $table = $(".Pro");
$(".right").on("click", function (e) {
    $table.animate({
        left: "-=" + widthOfContainer
    }, 2000);
});
$(".leftpro").on("click", function (e) {
    $table.animate({
        left: "+=" + widthOfContainer
    }, 2000);
});