JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<script src="http://jquery-xml2json-plugin.googlecode.com/svn/trunk/jquery.xml2json.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">XML &amp; JSON Beautifier</a>

            <div class="btn-group pull-right" style="padding: 0;margin-top:5px">
                <!-- <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>-->
                <!-- <ul class="dropdown-menu">
              <li>
                  
                  </li>
             <li class="divider"></li>
              <li></li>
            </ul>-->
            </div>
            <div class="btn-group pull-right" style="padding: 0;margin-top:5px">
                <input type="text" class="form-control" id="searcher" style="margin:0" placeholder="Search beautified xml & json..." />
            </div>
            <div class="btn-group pull-right search-icon-container"> <a class="btn search-icon up" href="javascript:;"><i class="icon-chevron-up"></i></a>  <a class="btn search-icon down" href="javascript:;"><i class="icon-chevron-down"></i></a>

            </div>
            <div class="pull-right">
                <label id="result_count"></label>
            </div>
        </div>
        <div...

CSS

@charset"utf-8";
   /*
 Copyright (c) 2010, Yahoo! Inc. All rights reserved.
 Code licensed under the BSD License:
 http://developer.yahoo.com/yui/license.html
 version: 3.1.1
 build: 47
 */
   html {
       color: #000;
       background: #FFF;
   }
   body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
       margin: 0;
       padding: 0;
   }
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }
   fieldset, img {
       border: 0;
   }
   address, caption, cite, code, dfn, em, strong, th, var {
       font-style: normal;
       font-weight: normal;
   }
   li {
       list-style: none;
   }
   caption, th {
       text-align: left;
   }
   h1, h2, h3, h4, h5, h6 {
       font-size: 100%;
       font-weight: normal;
   }
   q:before, q:after {
       content:'';
   }
   abbr, acronym {
       border: 0;
       font-variant: normal;
   }
   sup {
       vertical-align: text-top;
   }
   sub {
       vertical-align: text-bottom;
   }
   input, textarea, select {
       font-family: inherit;
       font-size: inherit;
       font-weight: inherit;
   }
   input, textarea, select {
       *font-size: 100%;
   }
   legend {
       color: #000;
   }
   body {
       font-family:'Lucida Grande', arial, sans-serif;
       font-size: 11px;
   }
   .xv-source-pane {
       /*position: absolute;*/
       /*
    top:37px;
    bottom:0;
    left:0;
    right:0;
    */
       overflow: auto;
   }
   .xv-source-pane-inner {
       position: relative;
       padding: 10px;
       padding-left: 0;
   }
   .xv-source-xml {
       display: none;
   }
   #xv-source-data {
       display: none;
   }
   .xv-error {
       position: absolute;
       left:50%;
       top:100px;
       width:30em;
       padding: 20px;
       -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
       border-radius: 10px;
       border: 1px solid #ccc;
       margin-left:-15em;
      ...

JavaScript

function display_table() {
    return false;
}


$('.xv-tag-open').live('dblclick', nodeCicked);
$('.xv-tag-switcher').live('click', nodeCicked);

function nodeCicked() {
    log($(this).parent('.xv-node').not('.xv-one-line'));
    $(this).parent('.xv-node').not('.xv-one-line').toggleClass('xv-collapsed');
}


$('.xv-tag-open').live('click', function () {
    $('.xv-node .xv-tag').removeClass('selected');
    $(this).parent('.xv-node .xv-tag').addClass('selected');
});













jQuery.getPos = function (e) {
    var l = 0;
    var t = 0;
    var w = jQuery.intval(jQuery.css(e, 'width'));
    var h = jQuery.intval(jQuery.css(e, 'height'));
    var wb = e.offsetWidth;
    var hb = e.offsetHeight;
    while (e.offsetParent) {
        l += e.offsetLeft + (e.currentStyle ? jQuery.intval(e.currentStyle.borderLeftWidth) : 0);
        t += e.offsetTop + (e.currentStyle ? jQuery.intval(e.currentStyle.borderTopWidth) : 0);
        e = e.offsetParent;
    }
    l += e.offsetLeft + (e.currentStyle ? jQuery.intval(e.currentStyle.borderLeftWidth) : 0);
    t += e.offsetTop + (e.currentStyle ? jQuery.intval(e.currentStyle.borderTopWidth) : 0);
    return {
        x: l,
        y: t - 60,
        w: w,
        h: h,
        wb: wb,
        hb: hb
    };
};
jQuery.getClient = function (e) {
    if (e) {
        w = e.clientWidth;
        h = e.clientHeight;
    } else {
        w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
        h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
    }
    return {
        w: w,
        h: h
    };
};

jQuery.getScroll = function (e) {
    if (e) {
        t = e.scrollTop;
        l = e.scrollLeft;
        w = e.scrollWidth;
        h = e.scrollHeight;
    } else {
        if...