JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<link rel="stylesheet" href="http://static.zinoui.com/1.4/themes/silver/zino.core.css">
<link rel="stylesheet" href="http://static.zinoui.com/1.4/themes/silver/zino.datatable.css">
<script src="http://static.zinoui.com/1.4/compiled/zino.datasource.min.js"></script>
<script src="http://static.zinoui.com/1.4/compiled/zino.datatable.min.js"></script>
<link rel="stylesheet" href="http://static.zinoui.com/1.4/themes/silver/zino.datasource.css">
<div id="datasource"></div>

CSS

.ds-wrap{
    float: left;
    border: solid 1px #BB8C3C;
    background-color: #F8EFD4;
    border-radius: 3px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    padding: 5px;
    width: 102px;
}
.ds-name{
    font-weight: bold;
    overflow: hidden;
    height: 30px;
    background-color: #EED592;
    border-bottom: solid 1px #BB8C3C;
    margin: 0 0 5px;
}
.ds-img{
    border: none;
    vertical-align: middle;
    width: 100px;
}
.ds-item{
    overflow: hidden;
    padding: 2px 0;    
}
.ds-label{
    display: inline-block;
    float: left;    
}
.ds-value{
    display: inline-block;
    float: right;
    font-weight: bold;
}

JavaScript

$(function () {
    var ds = zino.DataSource({
        data: [
            {"Num":9,"Name":"Serge Ibaka","Pos":"F-C","Height":"6-10","Weight":235,"Birthday":"09/18/1989","Years":"4","Picture":"http://i.cdn.turner.com/nba/nba/media/act_serge_ibaka.jpg"},
            {"Num":35,"Name":"Kevin Durant","Pos":"F","Height":"6-9","Weight":235,"Birthday":"09/29/1988","Years":"6","Picture":"http://i.cdn.turner.com/nba/nba/media/act_kevin_durant.jpg"},
            {"Num":5,"Name":"Kendrick Perkins","Pos":"C","Height":"6-10","Weight":270,"Birthday":"10/10/1984","Years":"10","Picture":"http://i.cdn.turner.com/nba/nba/media/act_kendrick_perkins.jpg"},
            {"Num":0,"Name":"Russell Westbrook","Pos":"G","Height":"6-3","Weight":187,"Birthday":"11/12/1988","Years":"5","Picture":"http://i.cdn.turner.com/nba/nba/media/act_russell_westbrook.jpg"},
            {"Num":23,"Name":"Kevin Martin","Pos":"G","Height":"6-7","Weight":185,"Birthday":"02/01/1983","Years":"9","Picture":"http://i.cdn.turner.com/nba/nba/media/act_kevin_martin.jpg"},
            {"Num":6,"Name":"Derek Fisher","Pos":"G","Height":"6-1","Weight":210,"Birthday":"08/09/1974","Years":"17","Picture":"http://i.cdn.turner.com/nba/nba/media/act_derek_fisher.jpg"},
            {"Num":2,"Name":"Thabo Sefolosha","Pos":"G","Height":"6-7","Weight":215,"Birthday":"05/02/1984","Years":"7","Picture":"http://i.cdn.turner.com/nba/nba/media/act_thabo_sefolosha.jpg"},
            {"Num":8,"Name":"Ronnie Brewer","Pos":"F","Height":"6-7","Weight":225,"Birthday":"03/20/1985","Years":"7","Picture":"http://i.cdn.turner.com/nba/nba/media/act_ronnie_brewer.jpg"}
        ],
        fields: [
            {name: "Picture", type: "string"},
            {name: "Num", type: "numeric"},
            {name: "Name", type: "string"},
            {name: "Pos", type: "string"},
            {name: "Height", type: "string"},
            {name: "Weight", type: "numeric"},
            {name: "Birthday", type: "date"},
            {name: "Years", type:...