JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<header>
                    <div class="site-header">
                <div class="fixed-width header-first">
                    <div class="bd content">
                        <a href="/events#all" data-name="logo">
                            <img class="header-logo" src="/bundles/hautelookheader/images/hautelook-logo.png" alt="HauteLook" width="186" height="40">
                        </a>
                        <div id="secondary-nav-outlet"></div>

                        <div id="header-promo-outlet">
                            <span class="header-promo">
                              <a class="header-promo-link">
                                  <img src="/bundles/hautelookheader/images/headerpromo-shipping.png">
                              </a>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="fixed-width header-second">
                    <div class="bd">
                        <div class="primary-nav">
                            

                            <div id="member-credit-outlet"></div>
                            <div id="cart-button-outlet"></div>
                        </div>
                    </div>

                </div>
            </div>
            </header>

    <div class="main-content">
            <div class="product-page">
        <div class="titlebar">
            <div class="left-column">
                <div class="back-to-brand">
                    <span class="arrow-left"></span> See All Twenty8Twelve
                </div>
            </div>
            <div class="right-column">
                <h3 class="product-brandname">Twenty8Twelve</h3>
            </div>
        </div>
        <div class="content">
            <div class="left-column">
                <div class="product-carousel">
                    <img class="product-image" src="http://www1.hautelookcdn.com/products/304123/large/1927172.jpg">

          ...

CSS

/* ==========================================================================
   Normalize.scss settings
   ========================================================================== */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
/* line 31, ../../vendor/normalize-scss/_normalize.scss */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
/* line 41, ../../vendor/normalize-scss/_normalize.scss */
audio,
canvas,
video {
  display: inline-block;
}

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
/* line 54, ../../vendor/normalize-scss/_normalize.scss */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 8/9.
 */
/* line 63, ../../vendor/normalize-scss/_normalize.scss */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 * 3.Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 */
/* line 78, ../../vendor/normalize-scss/_normalize.scss */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/**
 * Remove default margin.
 */
/* line 91, ../../vendor/normalize-scss/_normalize.scss */
body {
  margin: 0;
}

/*...

JavaScript

var $content = $('.main-content');
var content = $('.main-content').html();
content = content.replace(/Twenty8Twelve/g, 'Oh hai!');

$('.product-image').click(function() {
    console.debug('Replacing content...');
    $content.empty();
    $content.html(content);
    console.debug('Content replaced.');    
});