JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<div class="cc-announcement">
<a class="announcement msg" href="#1">      
	 	<div class="cc-announcement__inner">
      		message 1
    	</div>
</a>
    
 <a class="announcement-alt msg" href="#2">
      	<div class="cc-announcement__inner">
      		message 2
    	</div>
    </a>
</div>

CSS

.cc-announcement a {
  display: none;
  position: absolute;
}

.cc-announcement {
   position: relative;
}

JavaScript

// Scoping function to avoid creating globals
(function() {

  var a = $('.cc-announcement').children();  
  var index = 0;
  run()

  function run() {
    a.filter('.active').fadeOut(500).removeClass('active');
    a.eq(index).fadeIn(500).addClass('active');
    index = (index + 1) % a.length; // Wraps around if it hits the end
    setTimeout(run, 3000);
  }
})();