JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<div class="container">
        <ul class="facts">
		    <li>
                <span>What goes ho-ho whoosh, ho-ho whoosh?<br/>Santa caught in a revolving door.</span>
            </li>
			<li>
                <span>Whats white and goes up? <br/> A confused snowflake.</span>
            </li>
			<li>
                <span>Which Christmas carols do parents like best? <br/> Silent Night.</span>
            </li>
			<li>
                <span>How did the snowman get to school?<br/>On his icicle.</span>
            </li>
			<li>
                <span>What do you call a three-legged donkey?<br/> A wonkey.</span>
            </li>
        </ul>
	<div class="speech">
		&nbsp;</div>
</div>

CSS

.facts > li {
    display: none;
}
span
{
    display: block;
}

.speech {
    -moz-user-select: none;
    background-color: #FFFFFF;
    border: 8px solid #666666;
    border-radius: 30px 30px 30px 30px;
    box-shadow: 2px 2px 4px #888888;
    cursor: pointer;
    font-size: 14pt;
    height: 150px;
    line-height: 51px;
    position: absolute;
    right: 60px;
    text-align: center;
    top: 31px;
    width: 330px;
}
.speech:before
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 150px;
	border: 25px solid;
	border-color: #666 transparent transparent #666;
}

.speech:after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 38px;
	top: 150px;
	border: 15px solid;
	border-color: #fff transparent transparent #fff;
}




.container {
    display: block;
    height: 270px;
    margin: 0 auto;
    position: relative;
    width: 680px;
}

JavaScript

jQuery.fn.extend({
   rnditem : function(l) {
        var a = [],
            current = jQuery(this).text(),
            index,
            next;
       jQuery.each(l, function(index, item){
  a.push(jQuery(item).text());
});

       

       index = a.indexOf(current) + 1;
       if (index < 0 ||  index >= l.length) {
           index = 0;
       }

       next = (l.eq(index).html());

       jQuery(this).html(next);

      return this;
   }
 });
jQuery(document).ready(function () {
    

   var list = jQuery(".facts").find("li");
   
jQuery(document.body).on('click','.speech', function () {
      
jQuery(this).rnditem(list);
   });
  
jQuery(".speech").trigger("click");
    


});