JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

</div>

CSS

.container {
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
    background-color: #CCC;
    width: 300px;
    height:100px;
    margin-top: 200px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    /* [disabled]overflow: hidden; */
}
.blue{
    width:100px;
    height:auto;
    background-color:blue;
    display: none;
    
}

JavaScript

var jedi = new Array();
  jedi[0]= 'Anakin';
  jedi[1]= 'ObiWan';
  jedi[2]= 'Jacen Solo';

  $.each(jedi,function(counter,value){
      
    $('.container').append('<p class="blue">' + jedi[counter] + '</p>').children().fadeIn(800*counter);
      $('.container').children().fadeOut(800);
    //alert(value);
    
     })