JSFiddle - React, Tailwind, and code Playground

by apautler

HTML

<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Home | Title</title>

  <meta name="description" content="####" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  <link rel="stylesheet" type="text/css" href="webfonts/ss-social.css" media="screen">
  <link rel="stylesheet" type="text/css" href="webfonts/ss-standard.css" media="screen">

  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

</head>

<body id="leprechaun-legion">

  <div id="container">
    <header>
      <div class="nav-main clearfix">
        <div class="wrapper clearfix">
          <h1 id="logo"><a class="ir" href="#">The Leprechaun Legion</a></h1>

          <!-- Main Navigation -->
          <a href="#menu" class="menu-link ss-icon">Rows</a>

          <nav id="menu" class="menu" role="navigation">
            <ul class="level-1">
              <li><a href="#events">Events</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#photos">Photos</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </nav>

        </div> <!-- .wrapper -->
      </div> <!-- .nav-main -->

    </header>

  <div id="main" class="home" role="main">
    <div class="flex-wrapper clearfix">
       <div class="flexslider">
        <ul class="slides">
          <li class="image slide-1">
            <img src="http://placehold.it/1200x615" alt="##"...

CSS

/*
  Author:     Andrew Pautler (http://pautlerdesign.com/)
  Copyright:  (c) 2012 Pautler Design. All rights reserved.
*/
/*Imports*/
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
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. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-transform: translate3d(0, 0, 0);
}
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
  color: #222;
}
body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}
/*
 * 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: #2ea3d3;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #2ea3d3;
  color: #fff;
  text-shadow: none;
}
/*...