JSFiddle - React, Tailwind, and code Playground

by electronoob

HTML

<div id="app">
  <div id="panel">
  </div>
  <div id="tracker">
    <div id="line"></div>
    <div id="channel_0">
       <div id="name_0">1</div>
       <hr/>
       <div id="track_0">
         <div id="track_0_row_0" class="row">
           <div id="note">F</div>
           <div id="hyphen">-</div>
           <div id="octave">5</div>
           <div id="instrument_index">.7</div>
           <div id="volume">.</div>
           <div id="effect_index">A</div>
           <div id="effect_parameter">10</div>
         </div>
       </div>
    </div>
  </div>
</div>

CSS

.row{
  display: flex;
}

JavaScript

var tune = {
  channels: [
    {
      id: 0,
      rows: [
        {
          id: 0,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 1,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 2,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 3,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 4,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 5,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 6,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 7,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 8,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 9,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
          id: 10,
          note: "F",
          octave: 5,
          instrument: 7,
          volume: 0,
          effect: "A",
          parameter: 10,
        },
        {
         ...