JSFiddle - React, Tailwind, and code Playground

by antouank

HTML

<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.all.js"></script>
<script src="http://login.teamviewer.com/Scripts/kendo/2012.3.1315-debug/kendo.common.js"></script>
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.common.css">
<link rel="stylesheet" href="https://dev-trunk.teamviewer.com//Content/kendo/2012.3.1315/kendo.metro.css">
<div id="mainContainer" style="border: 1px dotted gray">
    <div class="column">
        
    </div>
    <div class="column">
       
    </div>
    <div class="column">
       
    </div>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Noto+Sans');
 .column {
    vertical-align: text-top;
    font-family: 'Noto Sans';
    margin: 10px;
    display: inline-block;
    min-height: 50px;
    min-width: 300px;
    border: 1px dotted rgba(0, 0, 0, 0.15);
}
.portlet-header-text {
    font-weight: normal;
    font-size: 0.8em;
    font-family: 'Noto Sans';
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    max-width: 310px;
    cursor: default;
}
.ui-widget-content {
    font-family: 'Noto Sans';
}
.ui-icon {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
}
.portlet {
    width: 400px;
    margin: 4px;
}
.close {
    margin-left: 10px;
}

.portlet-content
{
    background-color: rgb(235, 235, 235);
    
}

JavaScript

$(function () {
    $(".column").sortable({
        connectWith: ".column"
    });
    
    var matches = [
        {
            ev: "R. Nadal # W. Tsonga",
            type: "Tennis",
            active: 1,
            players: [],
            markets: [
                {
                    mName: "Match Odds",
                    id: 123,
                    outcomes: [
                        {
                            outcome: "1",
                            paf: "1300",
                            btf: "1340"
                        },
                        {
                            outcome: "X",
                            paf: "2400",
                            btf: "2340"
                        },
                        {
                            outcome: "2",
                            paf: "4300",
                            btf: "4340"
                        }
                    ]
                }
            ]
        }
    ];
    
    matches.forEach( function(match){
        $('.column:eq(0)').append('<div class="portlet"><div class="portlet-header"><span class="portlet-header-text">'+match.ev+' </span>  </div>    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit      </div>     </div>');
    });
    
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .append("<span class='close ui-icon ui-icon-closethick'></span>")
        .end()
        .find(".portlet-content");

    $(".portlet-header").click(function () {
        $(this).children(':eq(0)').toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".close").bind(
        'click', function (event) {
       ...