JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="container">
        <div id="1" class="contentContainer red"></div>
        <div id="2" class="contentContainer blue"></div>
        <div id="3" class="contentContainer orange"></div>
        <div id="4" class="contentContainer green"></div>
        <div id="5" class="contentContainer black"></div>
        <div id="6" class="contentContainer grey"></div>
        <div id="7" class="contentContainer red"></div>
        <div id="8" class="contentContainer blue"></div>
        <div id="9" class="contentContainer orange"></div>
        <div id="10" class="contentContainer green"></div>
        <div id="11" class="contentContainer black"></div>
        <div id="12" class="contentContainer grey"></div>
        <div id="13" class="contentContainer red"></div>
        <div id="14" class="contentContainer blue"></div>
        <div id="15" class="contentContainer orange"></div>
        <div id="16" class="contentContainer green"></div>
        <div id="17" class="contentContainer black"></div>
        <div id="18" class="contentContainer grey"></div>
    </div>
</div>

<div class="right"><img src="http://www.csulb.och101.com/shared/images/yahoo_arrow.png" width='20px' height='20px' /></div>
<div class="left"><img src="http://www.csulb.och101.com/shared/images/yahoo_arrow.png" width='20px' height='20px' /></div>

CSS

.wrapper {
    position: relative;
    width: auto;
    height: 200px;
    top: 0;
    left: 0;
    overflow: hidden;
    perspective: 800px;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
}
.container {
    position: absolute;
    height: 200px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: -webkit-transform 1s; 
    -webkit-transition: -webkit-transform 1s; 
    -webkit-transition: -webkit-transform 1s; 
}
.container div{
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.contentContainer {
    width: 182px;
    height: 200px;
    display: inline-block;
    transform: rotateY(30deg);
    -moz-transform: rotateY(30deg);
    -webkit-transform: rotateY(30deg);
}
.red {
    background-color: red;
}
.blue {
    background-color: blue;
    transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}
.orange {
    background-color: orange;
    transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    -webkit-transform: rotateY(-30deg);
}

.green {
    background-color: green;
}
.black {
    background-color: black;
}
.grey {
    background-color: grey;
}

.left {
    position:absolute;
    top:95px;
    left:25%;
    background-color:white;
    transform:rotate(180deg);
-ms-transform:rotate(180deg); /* IE 9 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
    cursor: pointer;
}
.right {
    position:absolute;
    top:95px;
    right:25%;
    background-color:white;
    cursor: pointer;
}

JavaScript

var current=2;

$(document).ready(function () {
    var s=($(window).width()/3)-5;
    $('.contentContainer').css({'width':''+s+'px'});
    $('.right').click(function () {
        var position = $('.container').position();
        var r=position.left-($(window).width()/3);
        var lft=current;
        var rgt=current+2;
        current=current+1;
        $('#'+lft+'').css({'transform': 'rotateY(30deg)'});
        $('#'+current+'').css({'transform': 'rotateY(0deg)'});
        $('#'+rgt+'').css({'transform': 'rotateY(-30deg)'});
        
        $('.container').animate({
            'left': ''+r+'px'
        });
    });    
    
    $('.left').click(function () {
        var position = $('.container').position();
        var l=position.left+($(window).width()/3);
        if(l<=0)
        {
        var lft=current-2;
        var rgt=current;
        current=current-1;
        $('#'+lft+'').css({'transform': 'rotateY(30deg)'});
        $('#'+current+'').css({'transform': 'rotateY(0deg)'});
        $('#'+rgt+'').css({'transform': 'rotateY(-30deg)'});
            
        $('.container').animate({
            'left': ''+l+'px'
        });
        }
    });    
});





//Here we are getting the number of the divs with class contentContainer inside the div container
var length = $('div .container').children('div .contentContainer').length;
//Here we are setting the % width depending on the number of the child divs
$(".container").width(length*100 +'%');