JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<div id="container">
    <header>
      <a href="/"><h1><span>BRANTLEY</span> GUTIERREZ</h1></a>
      <div id="nav">
        <ul>
          <li><a href="/" class="page">Stills</a></li>
          <li><a href="/motion/">Motion</a></li>
          <!--<li id="w"></li>-->
          <li><a href="#contact" id="show">Contact</a></li>
        </ul>
        <span></span>
      </div>
    </header>
    <div id="contact">
      <p>
        <a href="mailto:?subject=website%20inquiry">[email protected]</a><br />
        555.123.4567
      </p>
    </div>
    <div id="main" role="main">
      <!--<img id="load" src="img/loading.gif" alt="Loading..." />-->
      <div id="overlay">
        <div id="ol" class="h"></div>
        <div id="or" class="h"></div>
      </div>
      <div id="gallery" class="content"></div>
        <div id="thumbs" style="width:1px;height:1px;overflow:hidden;position:absolute;margin:-1px 0 0 -1px">
          <ul class="thumbs">
            <li>
              <a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="TEST"></a>
            </li>

            <li>
              <a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1"></a>
            </li>

            <li>
              <a class="thumb" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2"></a>
            </li>

            <li>
              <a class="thumb" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3"></a>
            </li>

            <li>
              <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4"></a>
            </li>

            <li>
              <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5"></a>
            </li>

            <li>
              <a class="thumb"...

CSS

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Force vertical scrollbar in non-IE
 * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; overflow:hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { margin: 0; font-size: 13px; line-height: 1.231; font-weight:bold;}

body, button, input, select, textarea { font-family:Helvetica Neue, Helvetica, sans-serif; color: #222; }

/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

/*::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }*/


/* =============================================================================
   Links
   ========================================================================== */

a { color: #1d1d1d;    text-decoration:none; -webkit-transition:color .25s linear;-moz-transition:color .25s linear;-o-transition:color .25s linear;transition:color .25s linear; }
/* a:visited */
a:hover { color: #e60000; -webkit-transition:color .25s linear;-moz-transition:color .25s linear;-o-transition:color .25s linear;transition:color .25s linear; }
a:active {     color: #a80000; -webkit-transition:none; -moz-transition:none; -o-transition:none; transition:none; }
a:focus { outline: thin dotted; }

/* Improve readability when...

JavaScript

window.log = function(){
  log.history = log.history || [];
  log.history.push(arguments);
  if(this.console) {
    arguments.callee = arguments.callee.caller;
    var newarr = [].slice.call(arguments);
    (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
  }
};
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());

/*
 * jQuery history plugin
 * 
 * sample page: http://www.mikage.to/jquery/jquery_history.html
 *
 * Copyright (c) 2006-2009 Taku Sano (Mikage Sawatari)
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Modified by Lincoln Cooper to add Safari support and only call the callback once during initialization
 * for msie when no initial hash supplied.
 */

jQuery.extend({
    historyCurrentHash: undefined,
    historyCallback: undefined,
    historyIframeSrc: undefined,
    
    historyInit: function(callback, src){
        jQuery.historyCallback = callback;
        if (src) jQuery.historyIframeSrc = src;
        var current_hash = location.hash.replace(/\?.*$/, '');
        
        jQuery.historyCurrentHash = current_hash;
        // if ((jQuery.browser.msie) && (jQuery.browser.version < 8)) {
        if (jQuery.browser.msie) {
            // To stop the callback firing twice during initilization if no hash present
            if (jQuery.historyCurrentHash == '') {
            jQuery.historyCurrentHash = '#';
        }
        
            // add hidden iframe for IE
            jQuery("body").prepend('<iframe id="jQuery_history" style="display: none;"'+
                (jQuery.historyIframeSrc ? ' src="'+jQuery.historyIframeSrc+'"' : '')
                +'></iframe>'
           ...