JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">
<div id="two">
    <div id="k"></div>
    <div id="kk"></div>
    <div id="kkk"></div>
    <div id="kkkk"></div>
    <div id="kkkkk"></div>
    <div id="kkkkkk"></div>
    <div id="kkkkkkk"></div>
    <div id="kkkkkkkk"></div>
</div>
    <div>

CSS

#one{
    height:500px;
    width:300px;
    background-color:silver;
    margin-left:200px;
    overflow:hidden
    
}
#two{
    width:800px;
    height:100px;
    border:1px solid black;
   position:relative;
    
}
#k{
    width:100px;
    height:100px;
    background-color:black;
    position:relative;
    float:left;
   -webkit-animation: slide 10s  infinite;
}
#kk{
    width:100px;
    height:100px;
    background-color:red;
    position:relative;
    float:left
}
#kkk{
    width:100px;
    height:100px;
    background-color:green;
    position:relative;
    float:left;
  
}
#kkkk{
    width:100px;
    height:100px;
    background-color:yellow;
    position:relative;
    float:left
}
#kkkkk{
    width:100px;
    height:100px;
    background-color:blue;
    position:relative;
    float:left
}
#kkkkkk{
    width:100px;
    height:100px;
    position:relative;
     float:left;
    background-color:black
}
#kkkkkkk{
    width:100px;
    height:100px;
     position:relative;
     float:left;
    background-color:red
    
}
#kkkkkkkk{
     width:100px;
    height:100px;
     position:relative;
   float:left;
    background-color:green
}
@-webkit-keyframes slide {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -300px;
 }
 
}