JSFiddle - React, Tailwind, and code Playground

by Sergio Sánchez

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.4.0rc.js"></script>
<script src="https://rawgit.com/rniemeyer/knockout-postbox/master/build/knockout-postbox.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>
<div id="grid">
    <ul data-bind="foreach: fundList">
        <li> <span data-bind="text: fundName"> </span> 
            <input type="checkbox" data-bind="checked: isFavorite, click: $root.favorite.bind($data, id, $index())" />
        </li>
    </ul>
</div>
<div id="details">
    <div data-bind="foreach: fundList">
        <div class="box" data-bind="visible: isFavorite">
            <table class="table">
                <tr class="borderBottom">
                    <td class="title" data-bind="text:fundName +' fund details'"></td>
                    <td class="alignRight smaller"><a href="/report?id=5&scenarioId=444" class="reportIcon">
</a>
                    </td>
                </tr>
                <tr>
                    <td class="moreHeight alignCenter"><span class="bigger" data-bind="text: ucc"></span>

                        <br/><span class="smaller">UCC</span>

                    </td>
                    <td class="moreHeight alignCenter"><span class="bigger" data-bind="text: ucc"></span>

                        <br/><span class="smaller">Advance/Pending Drawdowns</span>

                    </td>
                </tr>
                <tr>
                    <td class="alignCenter moreHeight"><span class="bigger" data-bind="text: ucc"></span>

                        <br/><span class="smaller">Realized Carried Interest</span>

                    </td>
                    <td class="alignCenter moreHeight"><span class="bigger" data-bind="text: ucc"></span>

                        <br/><span class="smaller">Invested/Committed</span>

                    </td>
...

CSS

* {
    font-family:'Open Sans', sans-serif;
}
.box {
    float:left;
    position: relative;
    width: 405px;
    padding: 0;
    /* border: 1px solid green;*/
    min-width: 310px;
    height: 400px;
    margin-left: 30px;
    margin-bottom: 30px;
    border-bottom:1pt solid #909090;
}
tr.borderBottom td {
    border-bottom:1pt solid black;
}
.lessSpace1 {
    position: relative;
    top:-25px;
}
.lessSpace2 {
    position: relative;
    top:-67px;
}
.alignRight {
    text-align:right;
}
.moreHeight {
    height: 70px;
}
.lessHeight {
    height: 50px;
}
.reportIcon {
    width: 12px;
    height: 12px;
    display: inline-block;
    -webkit-mask: url(http://comoserbuenaenlacama.com/strategical.svg) no-repeat 50% 50%;
    mask: url(http://comoserbuenaenlacama.com/strategical.svg) no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: #909090;
}
.alignCenter {
    text-align:center;
}
.table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
}
.chart {
    width: 220px;
    height: 230px;
}
.borderless {
    border-style:none;
    width: 900px;
}
.smaller {
    font-size:11px;
    color: #a6a2a2;
    text-transform: uppercase;
}
.smaller a {
    font-size:11px;
    color: #909090;
    text-decoration: none;
    text-transform: capitalize;
}
.title {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    color:#4b4b4b;
}
.bigger {
    font-size:20px;
    font-weight: bold;
    text-transform: uppercase;
    color:#4b4b4b;
}
.hidden {
    display: none;
}

JavaScript

var Model = {
    "Funds": [{
        "IsFavorite": false,
            "FundId": 17364105,
            "FundName": "BTOF - T",
            "AvailableCapital": 173641050.0,
            "LatestCASPosted": "09/30/2015",
            "LastPostedTransaction": "11/13/2015",
            "Ucc": -9301666.655000000000000000000,
            "AdvancePendingDrawdowns": 511327.43000000000000000000,
            "RealizedCarriedInterest": 2.0,
            "InvestedCommitted": 327627735.88000000000000000000,
            "UndistributedProceeds": 4587386.9600000000000000000000,
            "ChartInvestment": 349865492.99000000000000000000,
            "ChartRemainingInvestment": 292782742.42000000000000000000
    }]
};;
var jsModel = Model.Funds;



const jsonModel = {
    "funds": [{
        "id": 1,
            "fundName": "BTOF",
            "description": "Description for BTOF",
            "isFavorite": true,
            "investment": 5000,
            "remaining": 300000,
            "UCC": 7402343,
            "InceptionDate": "11/13/2015"

    }, {
        "id": 2,
            "fundName": "BTAS",
            "description": "Description for BTAS",
            "isFavorite": false,
            "investment": 1000,
            "remaining": 500000,
            "UCC": 7402343,
            "InceptionDate": "11/13/2015"
    }, {
        "id": 3,
            "fundName": "BEP",
            "description": "Description for BEP",
            "isFavorite": false,
            "investment": 100000,
            "remaining": 1000,
            "UCC": 7402343,
            "InceptionDate": "11/13/2015"
    }]
};
//
function FundEntity(fund) {

    var formatCurrency = function (total) {
        var neg = false;
        if (total < 0) {
            neg = true;
            total = Math.abs(total);
        }
        return (neg ? "-$" : '$') + parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
    };
    var formatDate = function (stringDate) {
        var d = new...