JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Untitled Document</title>
    </head>
    <body>
    </body>
    </html>

CSS

.type1 {
            position: absolute;
            border: solid 1px gray;
            font: normal 12px Arial, Helvetica, sans-serif;
        }
        .type2 {
            position: absolute;
            border: solid 1px green;
            font: bold 12px Arial, Helvetica, sans-serif;
                        color: green;
        }

JavaScript

var xmlString = '<root>'
          + '<C type="1" x="25" y="30" text="My cool div" />'
          + '<C type="2" x="50" y="75" text="My other div" />'
          + '<C type="1" x="100" y="10" text="My fun div" />'
          + '<C type="2" x="150" y="150" text="My awesome div" />'
          + '</root>';
          
        $(function() {
          var xml = $(xmlString);
          $("C", xml).each(function(i,o) {
              var node = $(o);
                            
                            switch(node.attr("type")) {
                                
                                case "1" :
                                        $("<p />", { 
                                                "class" : "type1",
                                                css : {
                                                    left :node.attr("x") + "px",
                                                    top : node.attr("y") + "px"
                                                }
                                        }).text(node.attr("text")).appendTo("body");
                                    break;

                                case "2":
                                        $("<div />", { 
                                                "class" : "type2",
                                                css : {
                                                    left :node.attr("x") + "px",
                                                    top : node.attr("y") + "px"
                                                }
                                        }).text(node.attr("text")).appendTo("body");
                                    break;
                            }
                            
          });
        });