JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<div class="container">
<div class="marquee">
  <div class="image"><img src="#"></div>  
  <div class="image"><img src="#"></div> 
  <div class="image"><img src="#"></div> 
  <div class="image"><img src="#"></div>
  <div class="image"><img src="#"></div>
  <div class="image"><img src="#"></div>
  <div class="image"><img src="#"></div>
  </div>
</div>

CSS

.container {
  padding:10px;
  width:100%;
  overflow:hidden;
}
.marquee{
  display:block;
position:relative;
width:800px;
height:160px;
animation:scrollin 2s linear infinite;
padding:5px;

&:hover {
    animation-play-state: paused
}
}

.image {
  width:150px;
  height:150px;
  background-color:#f6f6f6;
  margin:3px;
  float:left;
}

@keyframes scrollin {
0% {left:400px;}
100% {left:-400px;}
}