JSFiddle - React, Tailwind, and code Playground

by cloud8421

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>News ticker sample</title>
    <link media="all" href="style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script src="functions.js" type="text/javascript"></script>
  </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">
        <h4>BREAKING</h4>
        <p>Meet us in Barcelona for #Offf! We'd love to meet <strong>YOU</strong></p>
    </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: 160px;
  height: 40px;
  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;
  z-index: 1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
}

.visible {
  opacity: 1 !important;
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
}

JavaScript

$(document).ready(function(){
    var news_container = $('#news_container');
    function news(){
        news_container.toggleClass('visible');
    };
    setInterval(news, 2000);
});