JSFiddle - React, Tailwind, and code Playground

by Ivan

HTML

<ul id="blink">
    <li class="">One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seaven</li>
  </ul>

CSS

li {
    list-style.none;
    display: block;
    width: 10%;
    padding: 0 .5em;
}

.cls {
    background: red;
    color: #fff;
  }

JavaScript

var ul = document.getElementById("blink"),
        li = ul.getElementsByTagName('li');
        n  = 0;
        m = n-1;

    function blink(n, m)
    {
        li[n].classList.toggle('cls');  
        li[m].classList.toggle('cls'); 
    }

    setInterval(function () {

        console.log(n);
        blink(n++, m++);
       
        if(n > li.length - 1) {n = 0;} 
        if(m > li.length - 1) {m = 0;} 
         
    }, 1000);