JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page1">
    <div class="blink">
        <div id="o1">This is object 1</div>
    </div>
    <div class="blink">
        <div id="o2">This is object 2</div>
    </div>
</div>
<div class="page2">
    <div class="blink">
        <div id="o3">This is object 3</div>
    </div>
        <div class="blink">
        <div id="o4">This is object 4</div>
    </div>
</div>
<div id="b1">1. first object</div>
<div id="b2">2. second object</div>

CSS

#o1 {width: 100px; height: 30px; background-color: yellow; padding: 10px; position: absolute; top: 10px; left: 10px;}
#o2 {width: 100px; height: 30px; background-color: green; padding: 10px; position: absolute; top: 50px; left: 10px;}

#o3 {width: 100px; height: 30px; background-color: blue; padding: 10px; position: absolute; top: 10px; left: 10px;}
#o4 {width: 100px; height: 30px; background-color: red; padding: 10px; position: absolute; top: 50px; left: 10px;}

.page1 {width: 500px; height: 100px; position: relative; display: block;}
.page1.visible {display: block;}
.page1.invisible {display: none;}

.page2 {width: 500px; height: 100px; position: relative; display: none;}
.page2.visible {display: block;}
.page2.invisible {display: none;}

#b1 {width: 150px; height: 30px; margin-top: 50px; float: left; display: inline; border: 1px solid; }
#b2 {width: 150px; height: 30px; margin-top: 50px; float: left; display: inline; border: 1px solid; margin-left: 10px;}

JavaScript

$(document).ready(function()
{	

    function blinkObject () {
	  $('.blink').fadeTo(0,0);//hide at first
	  $(".blink").each(function(i) {//for each blink
      $(this).delay(i*1000).animate({opacity: '1'}, 1000);//delay is set by 8000, and will fade in each item 8 seconds apart from each other. the fade will animate over 1000ms
      });
		
	}
    
    $("#b1").click(function(){
        $('.blink').stop(true,true);
        $(".page1").removeClass("invisible"); 
        	$(".page1").addClass("visible"); //
	        $(".page2").removeClass("visible"); //
            blinkObject ();
        
    });
    
    $("#b2").click(function(){
        $('.blink').stop(true,true);
        	$(".page1").removeClass("visible"); //
            $(".page1").addClass("invisible"); //
	        $(".page2").addClass("visible"); //
            blinkObject ();
    });
    
});