JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

HTML layout generator.

<hr />

<h2>Assemble:</h2>
<div id="assemble">
    
    <h3>Page title</h3>
    <input id="pagetitle" />
    
    <h3>Columns</h3>
    <select id="columns">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

</div>



<h2>Preview:</h2>
<div id="preview"></div>



<h2>Code:</h2>
<textarea id="code"></textarea>

CSS

body { 
    background: #222; 
    color: #fff;
    font-size: 13px;
    font-family: "Helvetica Neue", Verdana, Arial, Sans-serif;
}

#preview { 
    width: 400px;
    height: 300px;
    background: #555;
    border: 6px solid #fff;
}

JavaScript

var prev_code = $('#preview, #code'),
    code = $('#code'),
    assemble = $('#assemble');




var pagetitle = assemble.find('#pagetitle').attr('value') || '',
    jquery = '<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>',
    
    header = '<!DOCTYPE html>' +
             '<html lang="en">' +
             '<head>' +
            
                 '<meta charset="utf-8">' +
                 '<title>'+ pagetitle +'</title>' +
            
                 '<link rel="stylesheet" type="text/css" href="style.css" />' +
                 jquery +
             
             '</head>' +
             '<body>',
    
    footer = '</body>' +
             '</html>';

// Generate code into #preview and #code elements.
$( header + 
   '<div id="wrap"></div>' + 
   footer ).appendTo( prev_code );

// Convert html inside the #code code into 'readable' text/code;
code.text( code.html() );