JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="proposal_content">
<div id="proposal_content_top" class="ui-resizable" style="top: 0px; left: 0px; width: 644px; height: 260px;">
<div id="proposal_sheet">
<div id="scroll-overlay-top"></div>
<h1>Proposal Name</h1>
<p style="font-weight:bold">Amazing Idea</p>
<h1>Proposal Definition</h1>
<p></p>
<p>
<span style="color: #333333;">zdaregerqgre</span>
sdfsafsadfsda
</p>
<br>
<p>sdafasdfasd</p>
<br>
<p>f</p>
<br>
<p>asd</p>
<br>
<p>fasd</p>
<br>
<p>f</p>
<br>
<p>&nbsp;</p>
<br>
<p>&nbsp;</p>
<br>
<p>dsaf</p>
<br>
<p>&nbsp;</p>
<br>
<p>&nbsp;</p>
<br>
<p>asdf</p>
<br>
<p>a</p>
<br>
<p>sd</p>
<br>
<p>f</p>
<br>
<p>asd</p>
<br>
<p>f</p>
<br>
<p>&nbsp;</p>
<br>
<p>a</p>
<br>
<p>&nbsp;</p>
<br>
<p>s</p>
<br>
<p>d</p>
<br>
<p>f</p>
<br>
<p>&nbsp;</p>
<br>
<p>&nbsp;</p>
<br>
<p>a</p>
<br>
<p>sd</p>
<br>
<p>f</p>
<p></p>
<h1>2nd</h1>
<p></p>
<p>
this is awesomer
<br>
</p>
<p></p>
<h1>1st</h1>
<p></p>
<p>
This is awesome
<br>
</p>
<p></p>
<div id="file_upload_form" style="margin-top:20px"></div>
<h1>RELATED IDEA(S) &amp; ATTACHMENTS</h1>
<div style="list-style-type: none; margin-top: 5px;font-weight:bold;"> </div>
<br>
<div id="scroll-overlay-bottom"></div>
</div>
<div class="ui-resizable-handle ui-resizable-e"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001;"></div>
</div>
<div id="proposal_content_bottom" style="height: 23px;">
<div id="proposal_content_comments">
<div id="proposal_discussion">
<table width="100%" style="margin-top:25px; margin-bottom:10px;">
<tbody>
<tr>
<td id="tab_proposal" class="tab_selected" width="160" align="center" onclick="commentsTab('proposal');"> Proposal Discussion </td>
<td id="tab_eval" class="tab_unselected" width="160" align="center" onclick="commentsTab('eval');"> Evaluation Comments </td>
<td id="tab_idea_comments" class="tab_unselected" width="160" align="center" onclick="commentsTab('idea_comments');">...

CSS

.tab_selected {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #969696 #969696 -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #1E1E1E;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    padding: 8px;
    text-transform: uppercase;
}
.tab_unselected {
    border-bottom: 1px solid #969696;
    color: #0086DD;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    padding: 8px;
}
.ui-resizable-s {
    border-top: 1px solid #DCDCDC;
    bottom: -5px;
    cursor: row-resize;
    height: 4px;
    left: 0;
    width: 100%;
}
.ui-resizable-handle {
    background: none repeat scroll 0 0 #F0F0F0;
    display: block;
    font-size: 0.1px;
    z-index: 99999;
}
#proposal_content {
    height: 100%;
    overflow: hidden;
}
#proposal_content_top {
    height: 60%;
    max-height: 75% !important;
    min-height: 10% !important;
    overflow: hidden;
    padding-bottom: 46px !important;
    width: 100% !important;
}
#proposal_content_bottom {
    max-height: 90%;
    min-height: 25%;
    overflow: hidden;
    padding-right: 10px;
}
#comment_list_container {
    border: 1px solid #969696;
    height: 100%;
    margin-right: 0 !important;
    margin-top: -8px;
    overflow: auto;
    padding: 10px;
}
#comment_list {
    border: 0 none !important;
}
#proposal_sheet {
    height: 100%;
    margin: 0 11px 10px 2px !important;
    overflow: auto;
    padding: 10px !important;
}
#proposal_discussion_container {
    height: 100%;
}
#proposal_discussion {
    margin-top: -26px !important;
}
#evaluation_comment_list {
    margin-right: 0 !important;
    margin-top: -8px !important;
}
#comment_container {
    margin-right: 0 !important;
}
#evaluation_content {
    margin-left: 9px !important;
}
#scroll-overlay-top {
    background: -moz-linear-gradient(center top ,...

JavaScript

$.ui.plugin.add("resizable", "alsoResizeReverse", {

    start: function(event, ui) {

        var self = $(this).data("resizable"), o = self.options;

        var _store = function(exp) {
            $(exp).each(function() {
                $(this).data("resizable-alsoresize-reverse", {
                    height: parseInt($(this).height(), 10), top: parseInt($(this).css('top'), 10)
                });
            });
        };

        if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
            if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
            else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
        }else{
            _store(o.alsoResizeReverse);
        }
    },

    resize: function(event, ui){
        var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

        var delta = {
            height: (self.size.height - os.height) || 0,
            top: (self.position.top - op.top) || 0
        },

        _alsoResizeReverse = function(exp, c) {
            $(exp).each(function() {
                var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['height', 'top'];

                $.each(css || ['height', 'top'], function(i, prop) {
                    var sum = (start[prop]||0) - (delta[prop]||0); // subtracting instead of adding
                    if (sum && sum >= 0)
                        style[prop] = sum || null;
                });

                //Opera fixing relative position
                if (/relative/.test(el.css('position')) && $.browser.opera) {
                    self._revertToRelativePosition = true;
                    el.css({ position: 'absolute', top: 'auto', left: 'auto' });
                }

                el.css(style);
            });
        };

        if (typeof(o.alsoResizeReverse) ==...