JSFiddle - React, Tailwind, and code Playground

by Benjamin

HTML

<div class="caurosel-wrapper">
     <ul class="caurosel-list">
         <li class="first"><h3>1</h3></li>
         <li><h3>2</h3></li>
         <li><h3>3</h3></li>
         <li><h3>4</h3></li>
         <li><h3>5</h3></li>
         <li><h3>6</h3></li>
         <li><h3>7</h3></li>
         <li><h3>8</h3></li>
         <li><h3>9</h3></li>
         <li><h3>10</h3></li>
         <li><h3>11</h3></li>
         <li><h3>12</h3></li>
     </ul>
</div>

CSS

.caurosel-wrapper{
    overflow:hidden;
    position:relative;
    width:auto;
    max-width: 1440px;
    margin: 0 auto 30px;
}

.caurosel-list{
    width: 2112px;
    list-style-type: none;
    white-space: nowrap;
    font-size: 0;
    animation: moveSlideshow 15s linear infinite;
}
    li{
        display: inline-block;
        background-color: gray;
        width: 160px;
        height: 160px;
        margin: 0 8px;
    }
    li.first{
        -webkit-animation: moveSlideshow 30s linear infinite;
        -moz-animation: moveSlideshow 30s linear infinite;
        -ms-animation: moveSlideshow 30s linear infinite;
        -o-animation: moveSlideshow 30s linear infinite;
        animation: moveSlideshow 30s linear infinite;
    }
    h3{
        font-size: 30px;
        color: #fff;
    }
    
    @keyframes moveSlideshow {
        0%{
            margin-left: 0;
        }
      100% { 
        margin-left: -538px;  
      }
    }