JSFiddle - React, Tailwind, and code Playground

HTML

<!-- NOTICEBOARD NAV -->
<a id="notice-prev" href="#">&laquo;</a>
<a id="notice-next" href="#">&raquo;</a>
<!-- /NOTICEBOARD NAV -->

<div style="text-align:center" class="noticeboard clearfix">
    <span class="notice">
        This is our website!
    </span>
    <span class="notice">
        Our Website is in beta!
    </span>
    <span class="notice">
        Does it looking good?
    </span>
    <span class="notice">
        NEWS4
    </span>
     <span class="notice">
        NEWS5
    </span>
</div>

<div class="line"></div>

CSS

body  { background: #eeeeee; }

/* NOTICE BOARD */
.noticeboard { display: block; position: relative; height: 50px; clear: both;}
.noticeboard span { position: absolute; top: 20px; left:0px;}

#notice-next { position: absolute; top: 10px; left: 30px; z-index: 100;}
#notice-prev { position: absolute; top: 10px; left: 10px; z-index: 100;}


.line { display: block; height: 2px; background: #fff;}


/* ClearFIX */
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
/* .clearfix { display: inline-block; }
 */* html .clearfix { height: 1%; }
.clearfix { display: block; }

JavaScript

// Noticeboard
$('.noticeboard span').hide();
$('.noticeboard span:first').show();

$(document).ready(function(){
   //Set height
    var height = 0;
    $('.noticeboard span').each(function(){
        if(height < $(this).height())
            height = $(this).height();    
    });
    //+20 because of the top-offset
    $("div.noticeboard").css("height",(height+20)+"px");
});

// Set a timeout
var timeOut = setTimeout(nextNotice, 3000);

// pause on hover
$('.noticeboard').hover(
    function(){clearTimeout(timeOut);},
    function(){timeOut = setTimeout(nextNotice, 3000);}
)
// Next notice function called on timeout or click
function nextNotice(event){
    clearTimeout(timeOut);
    timeOut = setTimeout(nextNotice, 3000);
    
    if ($('.noticeboard span:visible').is('.noticeboard span:last-child')) {
        $('.noticeboard span:visible').fadeOut();
        $('.noticeboard span:first-child').fadeIn();
    }
    else {
        $('.noticeboard span:visible').fadeOut().next().fadeIn();
    }
    event.preventDefault(); 
}


$('#notice-next').click(nextNotice);

$('#notice-prev').click(function(event) {
    if ($('.noticeboard span:visible').is('.noticeboard span:first-child')) {
        $('.noticeboard span:visible').fadeOut();
        $('.noticeboard span:last-child').fadeIn();
    }
    else {
        $('.noticeboard span:visible').fadeOut().prev().fadeIn();
    }

    event.preventDefault();
});