JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an 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: j.mp/bplateviewport -->
  <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 -->

  <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
  <link rel="stylesheet" href="/css/global.css">
  <!-- end CSS-->

  <!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->

  <!-- All JavaScript at the bottom, except for Modernizr / Respond.
       Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
       For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
  <script src="../js/libs/modernizr-2.0.6.min.js"></script>
  
</head>

<body class="about history">

<?php include("../../inc/header.php") ?>
    <div id="content">    
        <div id="sub-header">
            <ul id="crumbs">
                <li>About</li>
                <li>Mission Statement</li>
            </ul>
                
            <div id="search">
                <form class="searchform">
                    <input type="text" class="searchfield" value="enter your...

CSS

#content-browser {
    width: 720px;
    height: 81px;
    position: relative;
}

#content-browser ul {
    width: 10000px;
}

#content-browser li, li.milestone {
    display: block;
    float:left;
    width: 30px;
    height: 80px;
    border: #c0c0c0 1px solid;
    border-bottom: none;
    border-right: none;
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) .5%, rgba(219,219,219,1) 1%, rgba(255,255,255,1) 9%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(.5%,rgba(255,255,255,1)), color-stop(1%,rgba(219,219,219,1)), color-stop(9%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) .5%,rgba(219,219,219,1) 1%,rgba(255,255,255,1) 9%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) .5%,rgba(219,219,219,1) 1%,rgba(255,255,255,1) 9%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) .5%,rgba(219,219,219,1) 1%,rgba(255,255,255,1) 9%,rgba(255,255,255,1) 100%); /* IE10+ */
    background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) .5%,rgba(219,219,219,1) 1%,rgba(255,255,255,1) 9%,rgba(255,255,255,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
    }

li#timeline-next, li#timeline-back {
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 4%, rgba(219,219,219,1) 4%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right...