JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<textarea id="foo"><!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>

        <!-- PANEL 1 -->
        <div id="panel_1">
            <div class="panel">
                <!-- MAIN CONTENT AREA -->
                <section id="main-content">
                    <div class="video video-js-box">
                        <video class="video-js" controls preload="none" poster="video/Journey_static.jpg" title="LL Bean - Journey">
                            <source src="video/BMW_Z4_CaseStudy.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
                            <object width="436" height="245" class="video-flash-fallback" type="application/x-shockwave-flash" data="flash/videoPlayer.swf">
                                <param name="movie" value="flash/videoPlayer.swf">
                                <param name="allowfullscreen" value="true">
                                <param name="flashvars" value="vidPath=../video/Journey.mp4&posterPath=video/Journey_static.jpg&linkPath=http://client.coloringbookstudio.com/ideacity/site/review/video/BMW_Z4_CaseStudy.mp4&videoCredits=BMW. Case Study">
                                <img src="video/Journey_static.jpg" alt="LL Bean - Journey" title="LL Bean - Journey" />
                            </object>
                        </video>
                    </div>
                    <dl id="elsewhere">
                        <dt>Find us here:</dt>
                        <dd class="facebook"><a href="http://www.facebook.com/ideacity">Facebook</a></dd>
                        <dd class="twitter"><a href="http://twitter.com/ideacity">Twitter</a></dd>
                        <dd class="wordpress"><a href="http://blog.ideacity.com/">Wordpress</a></dd>
                        <dd class="youtube"><a href="http://www.youtube.com/user/IdeaCityWest6th">YouTube</a></dd>
                    </dl>
                    <div id="articles">
            ...

JavaScript

var text = document.id("foo").get("value");

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: text,
        delay: 0
    },
    method: 'post',
    onComplete: function() {
        var weLike = ["panel_1", "panel_2", "panel_3"];
        var panels = $$(this.response.elements).filter(function(el) {
            return $(el) && el.get && weLike.contains(el.get("id"));
        });
        
        alert(panels);
    }
}).send();