JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<link rel="stylesheet" href="http://tympanus.net/Freebies/HalcyonDaysTemplate/css/bootstrap.min.css">
<script src="http://tympanus.net/Freebies/HalcyonDaysTemplate/js/bootstrap.min.js"></script>
<script src="http://tympanus.net/Freebies/HalcyonDaysTemplate/js/waypoints.min.js"></script>
<script src="http://tympanus.net/Freebies/HalcyonDaysTemplate/js/modernizr.js"></script>
<link rel="stylesheet" href="http://tympanus.net/Freebies/HalcyonDaysTemplate/css/animate.css">
<script src="http://tympanus.net/Freebies/HalcyonDaysTemplate/js/scripts.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->


<section class="hero" id="hero">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-right navicon"> <a id="nav-toggle" class="nav_slide_button" href="#"><span></span></a>

            </div>
        </div>
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center inner">
                 <h1 class="animated fadeInDown">HALCYON<span>DAYS</span></h1>

                <p class="animated fadeInUp delay-05s">An exclusive HTML5/CSS3 freebie by Peter Finlan, for <em>Codrops</em>

                </p>
            </div>
        </div>
    </div>
</section>
<section class="text-center section-padding" id="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 wp1">
                 <h1 class="arrow">A Creative Portfolio Template</h1>

                <p>Sed a lorem quis neque interdum <a...

CSS

/* ==========================================================================
Google Fonts
========================================================================== */
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
@import url('http://fonts.googleapis.com/css?family=Merriweather');

/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */
 
/* ==========================================================================
HTML5 display definitions
========================================================================== */
 
/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }
/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */
[hidden] { display: none; }
/* ==========================================================================
Base
========================================================================== */
/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */
 
html { font-size: 100%; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */ }
html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */
html, button, input, select, textarea { font-family: 'Varela Round', sans-serif; }
/* * Addresses margins...