JSFiddle - React, Tailwind, and code Playground

by Pedro Pinto

HTML

<script src="https://rawgit.com/Doist/ICE/master/ICE.js"></script>
<div class="quote quote--hidden js-quote">This is quote #1<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>

<div class="quote quote--hidden js-quote">This is quote #2<br>Id dolores omnis aliquid et minus quae sequi error unde corrupti.</div>

<div class="quote quote--hidden js-quote">This is quote #3<br>Facilis similique magnam natus amet necessitatibus quo non.</div>

<div class="quote quote--hidden js-quote">This is quote #4<br>Vero consequatur ipsum in excepturi ratione eaque tempore.</div>

<div class="quote quote--hidden js-quote">This is quote #5<br>Hic inventore officiis placeat ipsam, reprehenderit aperiam.</div>

CSS

.quote {
  padding: 3rem;
  font-size: 3rem;
  line-height: 1.6;
}

.quote--hidden {
  display: none;
}

Babel + JSX

const QuotesShuffle = ((quotes) => {

	// Shuffle
  const shuffle = (quotes) => {
		return Math.floor(Math.random() * quotes.length);
  };
  
  // Show
  const show = (randomNum) => {
  	$removeClass(quotes[randomNum], 'quote--hidden');
  };

	// Init
  if (quotes.length > 0) {
    show(shuffle(quotes));
  }

	return;
  
})($$('.js-quote'));