JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    When 
    <span class="marquee style">

        <span>Human Rights</span>
        <span>Black Lives</span>
        <span>Free Speech</span>
        <span>Immigrants</span>
        <span>Education</span>
        <div>Human Rights</div>
    </span>
    <span class="marquee solid">

        <span>are</span>
        <span>are</span>
        <span>&nbsp;is</span>
        <span>are</span>
        <span>&nbsp;is</span>
        <div>are</div>
    </span>
    under attack what do We do?
</div>

CSS

.marquee {  
    --text_color: black;  
    --styled_text_color: #18c16c;  
    --num_items: 5; /* 1-8, BUT it has been optimized for 5 items*/  
    --animation_duration: 16s;  
    --scroll_items: 1; /* 1 for YES, 2 for NO scroll */  
    --underline: underline; /* 'underline' or 'none'  */  

    --scroll_distance: calc(var(--scroll_items) * 1.2em); /* increase or decrease '1.0em' */  

    display: inline-flex;  
    /* border: 1px solid black; */  
    position: relative;  
    overflow-y: hidden;  
}  
.marquee > div {  
    color:transparent;  
    display:inline-block;  
    position: relative;  
}  
.marquee > span {  
    display:inline-block;  
    justify-content: middle;  
    color: transparent;  
    text-decoration: none;  
    position: absolute ;  
    text-align: center;  
    width: 100%;  
    padding: 0px;  
      
    animation: flicker var(--animation_duration) infinite;  
    animation-delay: calc(var(--position) * var(--animation_duration) / var(--num_items));  
}  

.marquee.style > span {  
    --text_color: var(--styled_text_color);  
    text-decoration: var(--underline);  

}  

.marquee.solid > span {  
    animation-name: flicker-solid;  
    animation-composition: replace;  
}  

@keyframes flicker {  
  0% {  
    /* text is BELOW, and starts moving inline */    
    transform: translate(0, var(--scroll_distance));  
  }  
  4.5% {  
    color: var(--text_color);  
    /* text is inline, visible */  
    transform: translate(0,0);  
  }  
  15% {  
    /* text is inline, visible, STARTS moving up */  
    transform: translate(0,0);  
    color: var(--text_color);  
  }  
  19.5% {  
    /* text has finished moving up, and begins fading away */  
    color: transparent;  
    transform: translate(0, calc(var(--scroll_distance) * -1));  
  }  
  20% {  
    color: transparent;  
  }  
  100% {  
    color: transparent;  
  }  
}  

@keyframes flicker-solid { ...