JSFiddle - React, Tailwind, and code Playground

by Kazzkiq

HTML

<div class="carrossel-bloco">
    <button class="carrossel-btn btnPrevious">&larr;</button>
    <div class="carrossel-itens">
        <ul>
            <li>Img1</li>
            <li>Img2</li>
            <li>Img3</li>
            <li>Img4</li>
            <li>Img5</li>
            <li>Img6</li>
            <li>Img7</li>
        </ul>
    </div>
    <button class="carrossel-btn btnNext">&rarr;</button>
</div>

CSS

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

.carrossel-bloco{
    width:300px;
    padding:10px;
    margin-top:50px;
    float:left;
    background:#ccc;
    transition:all 0.2s linear;
    transform:skew(0deg,-10deg);
}

.carrossel-itens{
    overflow:hidden;
    float:left;
    width:220px;
}

.carrossel-itens ul{
    width:1500px;
}

.carrossel-itens ul li{
    float:left;
    margin-right:5px;
    width:70px;
    height:120px;
    background:#eee;
}

.carrossel-btn{
    float:left;
}