JSFiddle - React, Tailwind, and code Playground

by cloud8421

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>News ticker sample</title>
</head>
<body>
  <div id="activator">
    <img src="http://placehold.it/48x48" alt="First" id="first"/>
    <img src="http://placehold.it/48x48" alt="Second" />
    <img src="http://placehold.it/48x48" alt="Third" />
  </div>
  <div id="news_container">
    <article>
        <h4>BREAKING</h4>
        <p>Meet us in Barcelona for #Offf! We'd love to meet <strong>YOU</strong></p>
      </article>
      <article>
        <h4>BREAKING</h4>
        <p>Lorem ipsum dolor sit amet.</p>
      </article>
      <article>
        <h4>BREAKING</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisi.</p>
      </article>
      <article>
        <h4>BREAKING</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nisi.</p>
      </article>
  </div>
</body>
</html>

CSS

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  background-color: #CCC;
}

#activator {
  /* basic */
  background-color: #fff;
  margin: 0 auto;
  width: 200px;
  padding: 40px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

#news_container {
  opacity: 0;
  font-size: 10pt;
  background-color: #fff;
  margin: 0 auto;
  width: 100px;
  height: 36px;
  padding: 20px;
  text-align: center;
  /* border-radius */
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  /* box-shadow */
  -webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  -moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
  position: absolute;
  left: 540px;
  top: 138px;
  z-index: 1;
  -webkit-transition: all 1s ease; 
}

.visible {
  opacity: 1 !important;
}

JavaScript

/*
 * JQuery Random Plugin
 * 
 * Adds two random number functions to jQuery -
 * one to find a random number and one to find a random number between a max and min limit.
 * 
 * Version 1.0
 * 
 * by Christian Bruun - 23. jan 2009
 * 
 * Like it/use it? Send me an e-mail: [email protected]
 * 
 * License: None. Use and abuse. Comes with no warranty, of course!
 * 
 * 
 * Usage:
 * $.random(int);
 * $.randomBetween(min, max);
 * 
 * Code found at:
 * http://www.merlyn.demon.co.uk/js-randm.htm
 * 
 */
jQuery.extend({
    random: function(X) {
        return Math.floor(X * (Math.random() % 1));
    },
    randomBetween: function(MinV, MaxV) {
        return MinV + jQuery.random(MaxV - MinV + 1);
    }
});

//Let's create some fake news
var news_data = ['Stiamo per dominare il mondo', 'Sì, Nick corre veramente per 3 chilometri', 'No, Claudio non ci prova neanche', 'Yari fa palestra come i veri tamarri', 'No, usare VIM non è da invasato', 'Espresso è un editor da checca', 'Ho i pantaloni corti', 'Aaaaahhahhhahhh!'];

var news_ticker; //move into ready when done
function news(data_source, config) {
    //make some checks on configuration variables
    if (data_source.length === 0) {
        return 'Bad data source';
    }
    if (typeof config !== 'object') {
        return 'Bad config object';
    }
    //default config values
    var defaults = {
        activator: '#activator',
        news_container: '#news_container',
    children: 'img',
        offset_x: 46,
        offset_y: 80
    };
    //let's process the user config
    var settings = {
        activator: config.activator || defaults.activator,
        news_container: config.news_container || defaults.news_container,
    children: config.children || defaults.children,
        offset_x: config.offset_x || defaults.offset_x,
        offset_y: config.offset_y || defaults.offset_y
    };
    //private methods
    var last_shown = 0;
    var random_selector = function(total) {
        var randomChoice =...