JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<link rel="stylesheet" href="http://peterfinlan.com/infusion/css/bootstrap.min.css">
<script src="http://peterfinlan.com/infusion/js/unslider.min.js"></script>
<script src="http://peterfinlan.com/infusion/js/scripts.js"></script>
<div class="banner">
    <ul>
        <li style="background-image: url('http://peterfinlan.com/infusion/img/01.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="hero-title">CUTTING EDGE WP BUSINESS THEME</div>
                        <p class="hero-content">Gutful of bottlo no dramas he's got a massive hooroo.</p> <a href="#" class="hero-btn">BUY IT NOW</a>

                    </div>
                </div>
            </div>
        </li>
        <li style="background-image: url('http://peterfinlan.com/infusion/img/02.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div class="hero-title">VERY PHOTO, SUCH WAVES, WOW.</div>
                        <p class="hero-content">A very artsy photo with waves crashing over rocks. So /emosh.</p> <a href="#" class="hero-btn">BEER ME!</a>

                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

/*! 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 !important;
    -moz-font-smoothing: antialiased !important;
    -o-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
}
 
/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */
 
html,
button,
input,
select,
textarea {
    font-family: serif;
}
 
/*
 * Addresses...