JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="ticker-container">
<div class="ticker-tape">
<div class="slide-track">
      
    <div class="t_slide" id="ts1"></div>
    <div class="t_slide" id="ts2"></div>
    <div class="t_slide" id="ts3"></div>
    <div class="t_slide" id="ts4"></div>
    <div class="t_slide" id="ts5"></div>
    <div class="t_slide" id="ts6"></div>
    <div class="t_slide" id="ts7"></div>   
    <div class="t_slide" id="ts8"></div>
    <div class="t_slide" id="ts9"></div>
    <div class="t_slide" id="ts10"></div>
    <div class="t_slide" id="ts11"></div>
    <div class="t_slide" id="ts12"></div>
    <div class="t_slide" id="ts13"></div>
    <div class="t_slide" id="ts14"></div>
    
    <div class="t_slide" id="tc1"></div>
    <div class="t_slide" id="tc2"></div>
    <div class="t_slide" id="tc3"></div>
    <div class="t_slide" id="tc4"></div>
    <div class="t_slide" id="tc5"></div>
    <div class="t_slide" id="tc6"></div>
    <div class="t_slide" id="tc7"></div>   
    <div class="t_slide" id="tc8"></div>
    <div class="t_slide" id="tc9"></div>
    <div class="t_slide" id="tc10"></div>
    <div class="t_slide" id="tc11"></div>
    <div class="t_slide" id="tc12"></div>
    <div class="t_slide" id="tc13"></div>
    <div class="t_slide" id="tc14"></div>

</div>
</div>
</div>

CSS

body{margin:20px 0;background-color:#EBF4FF;color:#222222;}

.ticker-container {
  --slides: 14;
  --slides-width: 210px;
  --slides-height: 80px;
  --slides-speed: 30s;
  --slides-border: 1px;
  --slides-margin: 20px; 
  --full-slide: calc( (var(--slides-width) + var(--slides-margin) ) + (var(--slides-border) * 2));
}

.ticker-container .ticker-tape {
  height: auto;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.ticker-container .ticker-tape:before, .ticker-container .ticker-tape:after {
  background: linear-gradient(to right, #EBF4FF 0%, rgba(235, 244, 255, 0) 100%);
  content: "";
  height: 100%;
  position: absolute;
  width: 200px;
  z-index: 2;
}
.ticker-container .ticker-tape:after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
 
.ticker-container .ticker-tape:before {
  left: 0;
  top: 0;
}
.ticker-container .slide-track {
  -webkit-animation: scroll var(--slides-speed) linear infinite;
  animation: scroll var(--slides-speed) linear infinite;
  display: flex;
  width: calc(var(--full-slide) * (var(--slides) * 2));
}
.t_slide {
  margin: 0 calc(var(--slides-margin) / 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: var(--slides-border) solid #cccccc;
  width: var(--slides-width); height: var(--slides-height);
  background-image:url(https://www.kisbridgingloans.co.uk/images/secured-lenders/secured-lenders.png);
}
/* Animation */
@-webkit-keyframes scroll {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}
@keyframes scroll {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}

#ts1, #tc1 {background-position:0 0;}
#ts2, #tc2 {background-position:0 -80px;}
#ts3, #tc3 {background-position:0 -160px;}
#ts4, #tc4 {background-position:0 -240px;}
#ts5, #tc5 {background-position:0 -320px;}
#ts6, #tc6 {background-position:0 -400px;}
#ts7, #tc7 {background-position:0 -480px;}
#ts8, #tc8 {background-position:0 -560px;}
#ts9, #tc9 {background-position:0 -640px;}...