JSFiddle - React, Tailwind, and code Playground

by ttaylor

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script type="text/x-kendo-template" id="ContractDetail">
    <div id="ContractDetailTabstrip">
        <ul>
            <li class="k-state-active">
                Summary
            </li>
            <li>
                Payment History
            </li>
        </ul>
        <div class="inner">
             Summary Tab Content
        </div>
        <div class="inner">
            <div id="payments"></div>
            
           
        </div>
</script>
        <script type="text/javascript">
 function getval(val,fmt){return val==null?'N/A':kendo.toString(val,fmt);}
        </script>  
<div class="two_column white">
    <div id="hdr"></div>
    <div id="outer">
        <div id="top_tabs">
            <ul>
                <li class="k-state-active">Contracts</li>
                <li>Messages</li>
                <li>Your Contact Information</li>
            </ul>
            <div class="outer_tab"><div id="contracts"></div></div>
            <div class="outer_tab"><div id="messages">Messages Tab Content</div></div>
            <div class="outer_tab"><div id="clientinfo">Info Tab Content</div></div>
        </div>
    </div>
    <div class="clear"></div>
</div>

CSS

* {margin: 0;padding: 0;}

body
{
    background-color: #fff; 
    background-image: url(/Content/Images/backgroundtop.jpg); 
    background-position: top center; 
    background-repeat: no-repeat; 
    margin:0; 
    padding:0; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#4f4f4f;  
}

input[type=image], a:focus  {outline:none;}
img {border:0;outline:none;}
button {border:0; outline:none; box-shadow:none;}
.nav ul{list-style: none; }
.nav li{float: left; margin-left:10px;font-size:12px; color:#4f4f4f;}
.nav a {color:#666; text-decoration:none;}
.nav li a:hover{color: #009933; text-decoration:underline;}
.nav li a.current {color: #009933;}

a.link {color:#f60; text-decoration:none;}



.wrap {margin-right:auto; margin-left:auto; padding:0; width:900px;  }

.tophead {height: 5px;}

.header { }

.logo { display:inline; float:left; width:250px; margin-left:5px;}

.header .nav{margin-top: 25px; margin-left: 120px; font-size: 12px; float: right; }

.noscript  {float:right; color:red; font-size:18px;}

.container { }

.rotator { top:-75px;}

.two_column { margin: 0px auto 0px auto;  padding: 10px 3px 15px 3px; }

.white {background-color: #fff; border: 1px solid #cccccc; padding:10px 3px 3px 3px; clear:both; }

.leftCol { float:left; width:660px;  }
.rightCol {float:right; width:228px; }

.w640{width: 640px; margin:10px auto 10px auto;}

.footerhead {height: 5px; clear:both; border-bottom: 1px solid #cccccc;}
.footer { margin-top: 20px; margin-bottom:20px; background-color: transparent;}
.footer .nav li { margin-left:0px; margin-right:10px;}

.footer .security { float:right; width: 94px; height: 54px;  background: url(/content/images/mcafee.jpg) no-repeat top left;}
.footer .copy {clear:left; float:left; margin-top:15px; font-size: 10px; color: #666;}
.footer .details {clear:both; font-size: 10px; color: #ccc; }

.minHeight {height:450px;}
.orange {color: #f60;}
.ag{color: #ff6600; font-weight: bold;}

.hidden {display:none...

JavaScript

var mydata = {"totalCount":1,"result":[{"ContractId":1000,"ClientId":1000,"CreationDate":new Date(1322112968887),"DisplayOrder":1,"Status":"Review","ContractAmount":null,"ContractTerm":null,"MaxCreditAmount":null,"MaxTermLimit":null,"PaymentAmount":null,"APR":null,"FinanceCharge":null,"FundingDate":null,"MaturityDate":null,"Summary":null,"Payments":[{"TransDate":new Date(1317186000000),"ClientId":1000,"ContractId":1000,"JournalId":22,"JournalDescription":"New Loan","TransClass":201109,"Debit":961.9200,"Credit":0.0000},{"TransDate":new Date(1319778000000),"ClientId":1000,"ContractId":1000,"JournalId":23,"JournalDescription":"Payment","TransClass":201110,"Debit":0.0000,"Credit":106.8800},{"TransDate":new Date(1319778000000),"ClientId":1000,"ContractId":1000,"JournalId":31,"JournalDescription":"Payment","TransClass":201110,"Debit":0.0000,"Credit":106.8800},{"TransDate":new Date(1322460000000),"ClientId":1000,"ContractId":1000,"JournalId":24,"JournalDescription":"NSF fee","TransClass":201111,"Debit":25.0000,"Credit":0.0000},{"TransDate":new Date(1322546400000),"ClientId":1000,"ContractId":1000,"JournalId":25,"JournalDescription":"Payment","TransClass":201111,"Debit":0.0000,"Credit":131.8800},{"TransDate":new Date(1324360800000),"ClientId":1000,"ContractId":1000,"JournalId":32,"JournalDescription":"Payment","TransClass":201112,"Debit":0.0000,"Credit":106.8800},{"TransDate":new Date(1324447200000),"ClientId":1000,"ContractId":1000,"JournalId":33,"JournalDescription":"Payment ACH#:9999999","TransClass":201112,"Debit":0.0000,"Credit":106.8800},
                                                                                    {"TransDate":new Date(1317186000000),"ClientId":1000,"ContractId":1000,"JournalId":22,"JournalDescription":"New Loan","TransClass":201109,"Debit":961.9200,"Credit":0.0000},{"TransDate":new...