JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<div id="container">
        <ul>
            <li>hello 1</li>
            <li>hello 2</li>
            <li>hello 3</li>
        </ul>
   </div>

CSS

ul{
            list-style: none;
            line-height: 43px;
        }

        li{position: relative;}

        li:before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            background: url(attr(data-image));
        }

JavaScript

setInterval(function(){
            var randomImages = ['https://via.placeholder.com/150/0000FF','https://via.placeholder.com/150/FF0000','https://via.placeholder.com/150/FFFF00'];
            var imagIndex = Math.floor(Math.random() * 3);
           $('li:eq('+imagIndex+')').attr('data-image',randomImages[imagIndex]);
          console.log(randomImages[imagIndex]);
},200);