JSFiddle - React, Tailwind, and code Playground

by ajai jothi

CSS

div{
    padding:5px;
    border:6px solid #FC0;
    background:#333;
    color:white;
    margin:5px;
}
div div{
    border:5px solid #FF0;
}
div div div{
    border:4px solid #F0F;
}
div div div div{
    border:3px solid #0FF;
}
div div div div div{
    border:2px solid #F00;
}
div div div div div div{
    border:1px solid #0F0;
}

JavaScript

var str = '<%@ Control Language="C#" AutoEventWireup="true" Inherits="Glams.Web.ControlBase" %>';
str =str + '<%@ Register Src="~/Forms/JobDetail.ascx" TagPrefix="uc" TagName="JobDetail" %>';
str =str + '<%@ Register Src="~/Forms/Artwork.ascx" TagPrefix="uc" TagName="Artwork" %>';
str =str + '<%@ Register Src="~/Forms/Component.ascx" TagPrefix="uc" TagName="Component" %>';
str =str + '<asp:Panel ID="Holder" runat="server" ClientIDMode="Static">';
str =str + '<asp:Table ID="Table1" runat="server" ClientIDMode="Static">';
str =str + '<asp:TableRow ID="TableRow1" runat="server">';
str =str + '<asp:TableCell ID="celLeft" runat="server" ClientIDMode="Static">';
str =str + '<asp:Panel ID="ActionDiv" runat="server">';
str =str + '<uc:JobDetail runat="server" ID="uc1" />';
str =str + '</asp:Panel>';
str =str + '</asp:TableCell>';
str =str + '<asp:TableCell ID="celRight" runat="server" ClientIDMode="Static">';
str =str + '<asp:Panel ID="div12" runat="server">';
str =str + '<uc:Artwork runat="server" ID="uc2" />';
str =str + '</asp:Panel>';
str =str + '</asp:TableCell>';
str =str + '</asp:TableRow>';
str =str + '<asp:TableRow runat="server">';
str =str + '<asp:TableCell ID="celBottom" runat="server" ColumnSpan="2" ClientIDMode="Static">';
str =str + '<asp:Panel ID="div21" runat="server">';
str =str + '<uc:Component runat="server" ID="uc3" />';
str =str + '</asp:Panel>';
str =str + '</asp:TableCell>';
str =str + '</asp:TableRow>';
str =str + '</asp:Table>';
str =str + ' </asp:Panel>';

var x = $(str);

var iterate = function(n, p){
    if(!p){
        p=$('<div>'+n.id+'</div>');
    }    
    $(n).children().each(function(){
        var cn = $('<div>'+this.id+'</div>');
        cn.appendTo(p);
        iterate(this, cn);
    });
    return p;
};

var getClassName = function(nodeName){
    switch(nodeName.split(':').toLowerCase()){
        case 'uc':
            break;
        case 'tablecell':
            break;
        case 'TableRow':
            break;
   ...