JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.js"></script>
<script src="https://raw.github.com/romanych/ko.editables/master/ko.editables.js"></script>
<div>
    <table class="grid">
        <thead>
            <tr>
                <th>
                    id
                </th>
                <th>
                    title
                </th>
                <th>
                    Artists
                </th>
                <th>
                    Genres
                </th>
                <th>
                    Composers
                </th>
                <th>
                    Lyricists
                </th>
                <th>
                    Lyrics
                </th>
                <th>
                </th>
            </tr>
        </thead>
        <tbody data-bind="foreach: tracks">
            <tr>
                <td data-bind="text: id"> </td>
                <td data-bind="text: title"> </td>
                <td>
                    <ul data-bind="foreach: artists">
                        <li><span data-bind="text: title"></span></li>
                    </ul>
                </td>
                <td>
                    <ul data-bind="foreach: genres">
                        <li><span data-bind="text: title"></span></li>
                    </ul>
                </td>
                <td>
                    <ul data-bind="foreach: composers">
                        <li><span data-bind="text: title"></span></li>
                    </ul>
                </td>
                <td>
                    <ul data-bind="foreach: lyricists">
                        <li><span data-bind="text: title"></span></li>
                    </ul>
                </td>
                <td data-bind="text: lyrics"> </td>
                <td>
                    <a href="#edit" data-bind="click: $parent.Edit">Edit</a>
                </td>
            </tr>
        </tbody>
    </table>
  ...

CSS

body, input { font-family: arial; font-size: 14px; }

.grid { margin-bottom: 1em; width: 40em; border: 1px solid silver; background-color:White; }
.grid th { text-align:left; background-color: Black; color:White; }
.grid td, th { padding: 0.4em; vertical-align: top;}
.grid tr.odd { background-color: #DDD; }

li { list-style-type: none; margin-left: 0; }
ul { margin: 0;padding: 0;}

fieldset {
    margin-bottom: 1em; width: 37em; border: 1px solid silver; background-color:White;
    padding: 1.4em;
}

fieldset legend {
    font-size: 15px;
    font-weight: bold;
}

fieldset label 
{
    float: left;
    width: 6em;
    font-weight: bold;
    font-size: 13px;
}

input[type="text"] { width: 300px; }

JavaScript

var input_tracks = [
    {id: 101,
    title: 'Unforgiven',
    artists: [
        { id: 11, title: 'Timati' },
        { id: 12, title: 'Busta Rhymes'}],
    genres: [
        { id: 21, title: 'Noise' },
        { id: 22, title: 'EBM'}],
    composers:[
        { id: 31, title: 'Bach' },
        { id: 32, title: 'Mozart'}],
    lyricists:[
        { id: 41, title: 'Andre Montagar' },
        { id: 42, title: 'Zbignev Zapert'}],
    lyrics: 'text text'
    },
    {id: 102,
    title: 'Pony',
    artists: [
        { id: 11, title: 'Timati' },
        { id: 12, title: 'Busta Rhymes'}],
    genres: [
        { id: 21, title: 'Noise' },
        { id: 22, title: 'EBM'}],
    composers:[
        { id: 31, title: 'Bach' },
        { id: 32, title: 'Mozart'}],
    lyricists:[
        { id: 41, title: 'Andre Montagar' },
        { id: 42, title: 'Zbignev Zapert'}],
    lyrics: 'text text'
    },
    {id: 103,
    title: 'Is',
    artists: [
        { id: 11, title: 'Timati' },
        { id: 12, title: 'Busta Rhymes'}],
    genres: [
        { id: 21, title: 'Noise' },
        { id: 22, title: 'EBM'}],
    composers:[
        { id: 31, title: 'Bach' },
        { id: 32, title: 'Mozart'}],
    lyricists:[
        { id: 41, title: 'Andre Montagar' },
        { id: 42, title: 'Zbignev Zapert'}],
    lyrics: 'text text'
    },
    {id: 103,
    title: 'Hungry',
    artists: [
        { id: 11, title: 'Timati' },
        { id: 12, title: 'Busta Rhymes'}],
    date: 'Danny',
    genres: [
        { id: 21, title: 'Noise' },
        { id: 22, title: 'EBM'}],
    composers:[
        { id: 31, title: 'Bach' },
        { id: 32, title: 'Mozart'}],
    lyricists:[
        { id: 41, title: 'Andre Montagar' },
        { id: 42, title: 'Zbignev Zapert'}],
    lyrics: 'text text'
    },
]

// id, title, artists, genres, composers, lyricists, lyrics
var Track = function (id, title, artists, genres, composers, lyricists, lyrics) {
    var self = this;
    self.id = ko.observable(id);
   ...