JSFiddle - React, Tailwind, and code Playground

by davidmurdoch

HTML

<!doctype html>  





<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->

<!--[if IE 7 ]>    <html class="no-js ie7"> <![endif]-->

<!--[if IE 8 ]>    <html class="no-js ie8"> <![endif]-->

<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->

<head>

    <meta charset="utf-8">



    

    <meta name="viewport" content="width=device-width, initial-scale=1.0">



    

    <title>New Tab</title>

    <link href="/static/css/common.css" rel="stylesheet">

    <link href="/static/css/homepage-ad-layout.css" rel="stylesheet">

    <link href="/static/css/helpers.css" rel="stylesheet">



</head>



<body>



    <style>

body

{

    background:#E6E6E6;

}

</style>

<!-- Right -->

<span style="position:fixed;bottom:-4px;right:0;" id="theme_vistaprint_right" class="img" data-img-src="stage_right.png" data-pos-x="right" data-pos-y="bottom" data-img-scale="scaley" data-img-min-height="200" data-img-max-height="1000" href="http://www.example.com" data-click-id="2"><img style="visibility: visible; height: 802px; width: 401px; right: 0px; bottom: 0px; " src="http://static.a.gs-cdn.net/webincludes/skins/vistaprint/assets/stage_right.png?ver=20101222" data-img-width="500" data-img-height="1000"></span>



<!-- Left -->

<span id="theme_vistaprint_left" style="position:fixed;top:0;left:0;"  class="img" data-img-src="stage_left.png" data-pos-x="left" data-pos-y="top" data-img-scale="scaley" data-img-min-height="200" data-img-max-height="1000" href="http://www.example.com" data-click-id="2"><img style="visibility: visible; height: 802px; width: 614px; left: 0px; top: 0px; " src="http://static.a.gs-cdn.net/webincludes/skins/vistaprint/assets/stage_left.png?ver=20101222" data-img-width="766" data-img-height="1000"></span>



<!-- Logo -->

<a id="theme_vistaprint_logo" style="background:url(http://static.a.gs-cdn.net/webincludes/skins/vistaprint/assets/stage_logo.png) no-repeat;position:fixed;bottom:0;left:0;width:397px;height:119px"...

CSS

/*
  HTML5 ✰ Boilerplate

  style.css contains a reset, font normalization and some base styles.

  credit is left where credit is due.
  much inspiration was taken from these projects:
    yui.yahooapis.com/2.8.1/build/base/base.css
    camendesign.com/design/
    praegnanz.de/weblog/htmlcssjs-kickstart
*/

/*
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, 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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font: inherit;
  vertical-align:baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */


/* fonts.css from the YUI Library: developer.yahoo.com/yui/
   refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages

  there are three custom edits:
   * remove arial, helvetica from explicit font stack
   * we normalize monospace styles ourselves
   *...

JavaScript

$.frameReady = function(window, document){
    var $body = $("body", document),
        container = $body.find("#container"),
        placeholder = $body.find("#placeholder"),
        input = $body.find("#input");
    
    input.bind("keydown.custom", function(){
       container.addClass("focused");           
    }).bind("keyup.custom", function(){
        if(this.value === ""){
            container.removeClass("focused");
        }
    });
};

$("#iframe").contents().each(function(){
    jQuery(this.body).html(getHtml());
    var window = this.defaultView,
        document = window.document,
        $ = window.parent.jQuery;
    $(document).ready(function(){
        $.frameReady(window, document);
    });
    
});

    
    
    
    
function getHtml(){
    var html = [];
    html.push("<style>");
    
    html.push("#container{position:relative;padding:5px;border:solid 1px red;background:#ddd;}");
    html.push("#placeholder,#input{position:relative;padding:3px;margin:0;border:solid 1px red;display:block;margin:0;background:transparent;font:normal normal 12px/15px sans-serif;z-index:2;width:200px;cursor:text;outline:0;}");
    
    html.push("#placeholder{border-color:blue;position:absolute;top:5px;left:5px;z-index:3;opacity:1;-webkit-transition: opacity .25s linear;}");
    html.push(".focused #placeholder{z-index:1;opacity:0;}");
    
    html.push("</style>");
    html.push("<div id=container>");
    html.push("    <span id=placeholder>Placeholder</span>");
    html.push("    <input autofocus id=input>");
    html.push("</div>");

    return html.join("\n"); 
        
}