JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  <script type="text/javascript" src="http://use.typekit.com/xne0bwe.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script type="text/javascript">
        $(window).load(function () {
            var slides = $("#slider")
                .children("img");
            currentIndex = 0,
            slideCount = slides.length,
            fadeDuration = 1000,
            navigation = $('#process'),
            navCnt = 0,
            navNumFix = 1;
        
            for (i = 0; i < slideCount; i++) {
                navigation.append('<li><a href="#" class="navItem" data="' + navCnt+++'">' + navNumFix+++'</a></li>&#32;');
            }
            $('.navItem').click(function () {
                var getNavId = $(this)
                    .attr('data');
                var prevIndex = currentIndex;
                currentIndex = getNavId;
                if (prevIndex != currentIndex) {
                    $(slides[prevIndex])
                        .fadeOut(fadeDuration);
                    $(slides[currentIndex])
                        .fadeIn(fadeDuration);
                }
            });
        });
        </script>
    </head>

<body>
<div id="page-wrap">
  
  <header id="header" class="clearfix">
    <ul id="main">
      <li id="menu-item-45"><a href="#">About</a></li>
      <li id="menu-item-19"><a href="#">Portfolio</a></li>
    </ul>      
    <h1 class="logo" alt="Christopher Burton">Christopher Burton</h1>
    <ul id="secondary">
      <li id="menu-item-211"><a href="#">Projects</a></li>
      <li id="menu-item-27"><a href="#">Store</a></li>
    </ul>
  </header>
  
   
    <div id="sidebar">
      <h1 class="entry-title">H</h1>      
      <div class="info">
        <p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the...

CSS

/*   
Theme Name: The HTML5 Reset Theme
Theme URI: http://html5reset.org
Description: A style-free theme to get you started on an HTML5-based Wordpress theme of your own.
Author: Monkey Do!
Author URI: http://monkeydo.biz
Version: 1
*/

/*
RESET
-------------------------------------------------------------------------------*/
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,figure,footer,header,hgroup,nav,section{display:block}img,object,embed{max-width:100%}html{overflow-y:scroll}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active,a:focus{outline:0;border:0}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;vertical-align:bottom}td{font-weight:normal;vertical-align:top}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}pre{white-space:pre;white-space:pre-wrap;white-space:pre-line;word-wrap:break-word}input[type="radio"]{vertical-align:text-bottom}input[type="checkbox"]{vertical-align:bottom;*vertical-align:baseline}.ie6 input{vertical-align:text-bottom}select,input,textarea{font:99% sans-serif}table{font-size:inherit;font:100%}a:hover,a:active{outline:0}small{font-size:85%}strong,th{font-weight:bold}td,td,.portfolio...