JSFiddle - React, Tailwind, and code Playground

by Ramesh Kanagaraj

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.blueopal.min.css">
<script src="https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css">
 <div class="hide" id="message_wrapper">
        <div class="thread-summary">
            <span class="record-id">PRN4532</span> <span class="thread-subject">Functional Spec
                Review</span>
        </div>
        <div class="thread-commands">
            <a id="new_message" href="javascript:void(0);" class="post-message" value="Post"
                title="Post a new top level message to this discussion thread.">Post a Message</a>
            <span class="separator">|</span> <a id="collapse_all" href="javascript:void(0);"
                value="collapse" title="Collapse all messages except the top level postings to this discussion thread.">
                Collapse</a> <span class="separator">|</span> <a id="expand_all" href="javascript:void(0);"
                    value="expand" title="Expand all messages in this discussion thread.">Expand</a>
            <span class="separator">|</span> <a id="return_thread_list" href="JavaScript:void(0);"
                title="View the list of threads for this record.">View Threads</a>
        </div>
        <div class="thread-detail">
            Functional specification review comments for conversion of discussion threads to
            .NET. Please submit no later than October 5, 2012.</div>
        <div class="fiddle-spacer">
        </div>
        <!-- message list itself -- tree of messages -->
        <div id="message_list"...

CSS

.summary {
 }
 .summary a {
   color: black;
 }
 .detail {
   font-size: 0.8em;
   color: #181A1B;
 }
 .status {
   color: green;
 }
 .user {
   white-space: nowrap;
   color: inherit;
 }
 .user a {
   color: black;
   font-size: 0.8em;
 }
 .msgcount {
   text-align: right;
 }
 .lastupdate {
   font-size: 0.8em;
   white-space: nowrap;
 }
 .commands {
   font-size: 0.9em;
 }
 .commands a {
   color: black;
 }
 .thread-list-title {
   display: inline;
 }
 .thread-list-commands {
   font-size: 0.9em;
   padding-bottom: 10px;
   padding-right: 6px;
   vertical-align: top;
   display: inline;
   float: right;
   clear: both;
 }
 .thread-list-commands a {
   color: darkBlue;
 }
 .thread-list-commands .separator {
   padding-left: 2px;
   padding-right: 2px;
   color: #333;
 }
 .fiddle-spacer {
   clear: both;
   padding: 2px;
 }
 .header-info {
   padding-bottom: 10px;
 }
 body {
   font-family: Lucida Grande, Segoe UI, Arial, sans-serif;
 }
 .fiddle-input {
   padding: 10px 0;
   float: left;
 }
 .post-wrapper-fiddle-input {
   padding: 10px 0;
   float: left;
 }
 .textarea-field {
   width: 33em;
   height: 7em;
   resize: none;
 }
 .post-wrapper-textarea-field {
   width: 31.4em;
   height: 7em;
   resize: none;
 }
 .subscribe-list {
   float: left;
   font-size: 0.9em;
   width: 36.7em;
 }
 .fiddle-label {
   font-size: 0.9em;
   padding-right: 30px;
   width: 25%;
   padding: 10px 0;
   float: left;
 }
 .post-wrapper-fiddle-label {
   font-size: 0.9em;
   padding-right: 30px;
   width: 20%;
   padding: 10px 0;
   float: left;
 }
 .spacer {
   padding-bottom: 3px;
 }
 .item {
   margin: 0;
   padding: 3px;
   cursor: pointer;
 }
 .item > span {
   padding: 3px;
 }
 .show {
   display: block;
 }
 .thread-summary {
   float: left;
   padding-top: 10px;
   padding-left: 6px;
 }
 .thread-summary .record-id {
   color: #0D4265;
   font-weight: bold;
 }
 .thread-summary .thread-subject {
   color: #4D5A67;
   font-weight: bold;
 }
 .thread-commands {
   float: right;
  ...

JavaScript

$(document).ready(function () {

         var temp = $.parseJson([{"MessageID":16,
                   "ThreadID":1,
                   "PRN":1,
                   "Subject":"Re: uiui","DatePosted":"/Date(1346991924000)/","Message":"l;l;;l'",
                   "UserID":4,
                   "StartedBy":"Admin",
                   "FormID":1,
                   "InitialSubject":"Initial Thread edit",
                   "NextID":19}
                  
                  ,{"MessageID":19,"ThreadID":1,"PRN":1,"Subject":"Re: uiui","DatePosted":"/Date(1346992810000)/","Message":"fg fgd fdhd gc","UserID":4,"StartedBy":"Admin","FormID":1,"InitialSubject":"Initial Thread edit","NextID":22},{"MessageID":22,"ThreadID":1,"PRN":1,"Subject":"Re: uiui","DatePosted":"/Date(1346993806000)/","Message":"fhgfghfghgfhgf\r\n\r\nAdmin wrote:\r\n> fg fgd fdhd gc","UserID":4,"StartedBy":"Admin","FormID":1,"InitialSubject":"Initial Thread edit","NextID":20},{"MessageID":20,"ThreadID":1,"PRN":1,"Subject":"Re: uiui","DatePosted":"/Date(1346993419000)/","Message":"GDGSDGSDGSDG\r\n\r\nAdmin wrote:\r\n> fg fgd fdhd gc","UserID":4,"StartedBy":"Admin","FormID":1,"InitialSubject":"Initial Thread edit","NextID":18},{"MessageID":18,"ThreadID":1,"PRN":1,"Subject":"Re: uiui","DatePosted":"/Date(1346991982000)/","Message":"mklmk;k;","UserID":4,"StartedBy":"Admin","FormID":1,"InitialSubject":"Initial Thread edit","NextID":21},{"MessageID":21,"ThreadID":1,"PRN":1,"Subject":"Re: uiui","DatePosted":"/Date(1346993456000)/","Message":"DFHDFHDFHDFHDH\r\n\r\nAdmin wrote:\r\n> mklmk;k;","UserID":4,"StartedBy":"Admin","FormID":1,"InitialSubject":"Initial Thread edit","NextID":17},{"MessageID":17,"ThreadID":1,"PRN":1,"Subject":"Re: uiui","DatePosted":"/Date(1346991947000)/","Message":".;';.';.'jkniki","UserID":4,"StartedBy":"Admin","FormID":1,"InitialSubject":"Initial Thread edit","NextID":-1}]);
         
         
          var temp = $.parseJSON(JSON.stringify(messagesJsonFormat));
        var dataRows = [];
 ...