JSFiddle - React, Tailwind, and code Playground

by gabs00

HTML

<div class="textArea box_a active">a</div>
    <div class="textArea box_b">b</div>
    <div class="textArea box_c">c</div>

CSS

.textArea {
      position: absolute;
      height: 50px;
      width: 50px;
      display: block;
    }

    .box_a {
      background-color: blue;
    }

    .box_b {
      background-color: red;
    }

    .box_c {
      background-color: orange;
    }

    .active {
      z-index: 3;
    }

JavaScript

$(function(){
      var $elem = $('.textArea');

      timeout(0);

      function timeout(i){
        $($elem[i]).addClass('active');
        return setTimeout(function(){
          $elem.removeClass('active');
          i++;
          if(i >= $elem.length){
            i = 0
          }
          timeout(i);
        }, 1000)
      }
    });