JSFiddle - React, Tailwind, and code Playground

by snover

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
    var a = jQuery.noConflict();
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
    var b = jQuery.noConflict();
</script>
<div id="hiddens">
    <input type="text" value="foo">
    <input type="checkbox" value="foo">
    <textarea rows="3" cols="30">foo</textarea>
    <div>foo</div>
    <span>foo</span>
    <div style="width:30px">foo</div>
</div>
<div id="result"></div>

CSS

#hiddens {
    display: none;
}
#hiddens * {
    height: 90px;
}
h1 {
    font-weight: bold;
    margin-top: 1em;
}

JavaScript

var r = b('#result');

b.each([ a, b ], function (i, $) {
    r.append('<h1>' + $.fn.jquery + ':</h1>');
    r.append($('#hiddens *').map(function() {
        var $this = $(this);
        return [
            this.nodeName,
            $this.width() + 'x' + $this.height(),
            '[' + $this.css('width'),
            $this.css('height') + ']',
            $this.is(':visible') ? 'visible' : 'hidden'
        ].join(' ');
    }).get().join('<br>'));
});