JSFiddle - React, Tailwind, and code Playground
by jockebq
HTML
<div id="vs">
<div id="vs-container">
<div id="visitor-186" class="vs-content">
<div class="vs-meta">
<div class="vs-container-left">
<h4 class="vs-meta-title">1</h4>
</div>
</div>
<div class="vs-meta-names">
<div class="vs-container-right"><p>abc</p>
</div>
</div>
</div>
<div id="visitor-187" class="vs-content">
<div class="vs-meta">
<div class="vs-container-left">
<h4 class="vs-meta-title">2</h4>
</div>
</div>
<div class="vs-meta-names">
<div class="vs-container-right"><p>abc</p>
</div>
</div>
</div>
<div id="visitor-188" class="vs-content">
<div class="vs-meta">
<div class="vs-container-left">
<h4 class="vs-meta-title">3</h4>
</div>
</div>
<div class="vs-meta-names">
<div class="vs-container-right"><p>abc</p>
</div>
</div>
</div>
<div id="visitor-189" class="vs-content">
<div class="vs-meta">
<div class="vs-container-left">
<h4 class="vs-meta-title">4</h4>
</div>
</div>
<div class="vs-meta-names">
<div class="vs-container-right"><p>abc</p>
</div>
</div>
</div>
<div id="visitor-190" class="vs-content">
<div class="vs-meta">
<div class="vs-container-left">
<h4 class="vs-meta-title">5</h4>
</div>
</div>
<div class="vs-meta-names">
<div class="vs-container-right"><p>abc</p>
</div>
</div>
</div>
<div id="visitor-191" class="vs-content">
<div class="vs-meta">
<div class="vs-container-left">
<h4 class="vs-meta-title">6</h4>
</div>
</div>
<div class="vs-meta-names">
<div class="vs-container-right"><p>abc</p>
</div>
</div>
</div>
<div id="visitor-192" class="vs-content">
<div class="vs-meta">
<div...
CSS
#vs-container
{
white-space: nowrap;
animation: slide infinite 5s;
}
.vs-content
{
margin-bottom: 10px;
}
@keyframes slide {
0% {
margin-top: 0px;
}
50% {
margin-top: -50%;
}
100% {
margin-top: -100%;
}
}