JSFiddle - React, Tailwind, and code Playground

by escapedcat

HTML

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <!-- Use the .htaccess and remove these lines to avoid edge case issues.
       More info: h5bp.com/b/378 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title></title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile viewport optimized: h5bp.com/viewport -->
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

  <link rel="stylesheet" href="css/style-display-ie7.css">
  
  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
       Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5 elements & feature detects; 
       for optimal performance, create your own custom Modernizr build: www.modernizr.com/download/ -->
  <!--<script src="js/libs/modernizr-2.0.6.min.js"></script>-->
</head>

<body class="display">
  
  <div class="wrap">
  
    <header>
      <img width="990" height="100" src="http://intra.bmwgroup.net/China/NSC_Intranet/_common/img/bmw_group_logo.png" />
    </header>
    
    <div role="main">
    
      <div class="container">
          <ul>
              <li>
            <span class="user">
              <span class="name">Peter</span>
              <span class="qx">QX98297</span>
            </span><br />
            <span...

CSS

* {
  padding: 0;
  margin: 0;
}

body {
  font: normal 12px '微软雅黑','宋体', Songti宋体, SimSun, Arial, Helvetica, sans-serif;
  color: #000;
}

.wrap {
  width: 990px;
  margin: 0 auto 50px;
  
  position: relative;
}

#btnStart {
  display: block;
  
  width: 200px;
  padding: 10px;
  margin: 10px auto 0;
  
  cursor: pointer;  
  text-align: center;
  background: #666;

  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

#btnStart.wait {
  cursor: default;
  color: #ccc;
  background: #999;
}


.container {
  width: 480px;
  height: 500px;
  margin: 20px auto 0;

xbackground: pink;
  
  overflow: hidden;
  
  position: relative;
}

ul {
  float: left;
  
  position: absolute;
    bottom: 10px;
    left: 10px;
}

li {
  float: left;
  display: block;
  
  list-style: none;
  overflow: hidden;
  
  width: 450px;
  height: 78px;
  padding: 5px;
  margin: 10px 0 0;
  
  line-height: 1.2;
  color: #666;
x  background: deeppink;
  
xborder: 1px solid #999;
  
  position: relative;
}

li .user {
  font-size: 9px;

  position: absolute;
    top: 3px;
    right: 5px;
}

li .wish {
  color: #000;
  width: 95%;
  font-size: 20px;
  
  position: absolute;
    top: 13px;
}

li.winner {
  xposition: absolute;
  z-index: 10;
  
  color: #fff;
  background: #04c;
}

li.winner .name,
li.winner .qx {
  position: absolute;
}

span.tag {
  font-size: 18px;
  
  position: absolute;
    top: 3px;
}

JavaScript

var isDisplay = $('body').hasClass('display'),
    $list = $('ul'),
    listH = $('ul').height(),
    $items = $('li');

function moveTeaserItems() {
  var pos       = $list.css('bottom'),
      pos       = parseFloat(pos),
      posNew    = pos - 10,
      elFirst   = $list.find('li:first'),
      elLast    = $list.find('li:last');
console.log(pos + ', ' + posNew);
  
  if ( posNew <= -88 ) {
console.log('is 74 or minus: ' + (-posNew));
    elFirst.before(elLast);
    posNew = pos + 88;
  }
  
  $list.css({
    'bottom' : posNew + 'px',
    'padding-bottom' :  + 'px'});
  
}

var btnStartFunc = function () {
  if ( $(this).hasClass('started') ) {
console.log('stop');
      stopDisplaySlide();
      $(this)
        .unbind('click')
        .removeClass('started')
        .addClass('wait')
        .text('...wait');
  } else {
//      $list.prepend('<span>foo</span><span>foo</span><span>foo</span>');
//console.log($clones);
      //var $clones = $items.clone().addClass('clone').prependTo($list);
console.log('start');
      startDisplaySlide();
      $('.winner').remove();
//      rotateWheel();
      $(this)
        .addClass('started')
        .text('Stop');
  }
};

var autoInterval;

function startTeaserSlide() {
  autoInterval = setInterval(function() {
          moveTeaserItems();
      }, 5000);
};

function startDisplaySlide() {
  autoInterval = setInterval(function() {
          moveTeaserItems();
      }, 20);
};

function stopDisplaySlide() {
  clearInterval(autoInterval);
//  setTimeout ( "clearInterval(autoInterval)", 2000 );
  displaySlideSlow();
  setTimeout ( "stop()", 1500 );
  
};

function displaySlideSlow() {
//console.log('startSlow');
//  stopAuto();
  autoInterval = setInterval(function() {
          moveTeaserItems();
      }, 50);
};

function stop() {
  clearInterval(autoInterval);
console.log('Stopped');
  var $winner = $('li:last').prev().prev().prev();
  $winner
    .addClass('winner')
    .append('<span class="tag">Winner</span>');
   
 ...