JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<div class='container' style='z-index:-2;position:absolute; left:17px; top:11px; width:183px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 11pt; '><b>Roadway Identification:</b>
                </div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:47px; top:41px; width:137px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 11pt; '>Road/Route Name:</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:46px; top:66px; width:100px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 10pt; '>NBI Roadway:</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:47px; top:93px; width:140px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div style='font-family: Arial; font-size: 10pt; '>Position/Prefix (5a):</div>
            </td>
        </tr>
    </table>
</div>
<div class='container' style='z-index:-2;position:absolute; left:46px; top:118px; width:209px; height: 20px; ' showfcname='False' fechoicetype=''>
    <table cellspacing='0' cellpadding='0' width='100%' height='100%'>
        <tr>
            <td valign='top' align='left'>
                <div...

CSS

body > table{
 
    
}

JavaScript

$(function(){
    //var $data = $("<div class='content'>").append($("body").children().clone());
    
    var $content = $('body').children();
    var $inner = $('<div />').css({
        position: 'relative',
        width: '100%'
    });
    var $outer = $('<div />').css({
        position: 'absolute',
        width: '100%',
        overflow: 'auto',
        height: 400
    });
    
    $inner.append($content);
    $outer.append($inner);
    $outer.css({
        border:"solid 2px red",
    });
    $("body").html("");
    
    var top = 0;   
    var $table = $("<table>");
    $("body").append($table);
    for(var i = 0; i < 6; i++){
         var $data = $outer.clone();
        var $td = $("<td>").append($data);
        var $tr = $("<tr>").append($td);
        
        $tr.css({
            width:"100%",
            height: "400px"
        });
        
        $table.append($tr);
        
        //$data.css("top", top);
        //top += 410;
        //$('body').append($data);        
    }
});