JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

1001,5
1002,5
1003,5
1004,5
1005,5
1006,5
1007,5
1008,5
1009,5
1010,5
1011,5
1012,5
1013,5
1014,5
1015,5
1016,5
1017,5
1018,5
1019,5
1020,5
1021,5
1022,5
1023,5
1024,5
1025,5
1026,5
1027,5
1028,5
1029,5
1030,5
1031,5
1032,5
1033,6
1034,6
1035,5
1036,5
1037,5
1038,5
1039,5
1040,5
1041,7
1042,6
1043,7
1044,5
1045,5
1046,5
1047,5
1048,7
1049,5
1050,5
1051,5
1052,5
1053,6
1054,5
1055,5
1056,5
1057,8
1058,5
1059,5
1060,5
1061,5
1062,5
1063,5
1064,8
1065,9
1066,8
1067,5
1068,5
1069,5
1070,5
1071,10
1072,5
1073,5
1074,9
1075,9
1076,5
1077,5
1078,10
1079,10
1080,10
1081,10
1082,5
1083,9
1084,5
1085,5
1086,5
1087,6
1088,5
1089,9
1090,5
1091,8
1092,5
1093,10
1094,10
1095,10
1096,8
1097,10
1098,5
1099,6
1100,10
1101,10
1102,9
1103,5
1104,5
1105,7
1106,5
1107,5
1108,6
1109,5
1110,7
1111,10
1112,7
1113,6
1114,5
1115,10
1116,9
1117,6
1118,8
1119,5
1120,5
1121,7
1122,12
1123,11
1124,11
1125,6
1126,7
1127,10
1128,7
1129,8
1130,10
1131,12
1132,8
1133,12
1134,7
1135,6
1136,7
1137,7
1138,8
1139,8
1140,7
1141,7
1142,12
1143,10
1144,10
1145,12
1146,15
1147,9
1148,7
1149,15
1150,9
1151,8
1152,9
1153,7
1154,11
1155,8
1156,8
1157,12
1158,7
1159,10
1160,16
1161,16
1162,15
1163,10
1164,7
1165,12
1166,17
1167,15
1168,9
1169,8
1170,9
1171,10
1172,13
1173,11
1174,12
1175,12
1176,15
1177,15
1178,10
1179,10
1180,10
1181,10
1182,10
1183,15
1184,10
1185,15
1186,12
1187,20
1188,9
1189,10
1190,9
1191,10
1192,10
1193,12
1194,20
1195,10
1196,12
1197,18
1198,13
1199,15
1200,23
1201,10
1202,10
1203,15
1204,13
1205,20
1206,10
1207,11
1208,14
1209,16
1210,13
1211,14
1212,12
1213,12
1214,11
1215,15
1216,17
1217,16
1218,14
1219,13
1220,17
1221,15
1222,15
1223,14
1224,15
1225,15
1226,15
1227,14
1228,16
1229,25
1230,19
1231,20
1232,26
1233,21
1234,25
1235,15
1236,26
1237,25
1238,18
1239,18
1240,17
1241,20
1242,18
1243,24
1244,31
1245,20
1246,30
1247,25
1248,20
1249,26
1250,23
1251,25
1252,27
1253,36
1254,25
1255,25
1256,28
1257,32
1258,31
1259,32
1260,30
1261,34
1262,40
1263,40
1264,50

CSS

body {
  font-family: "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 13px;
}

table {
  width: 100px;
  margin: 5em auto;
}

table, td {
  border-collapse: collapse;
  border-spacing: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #000;
}

td {
  padding: 5px
}

CoffeeScript

columnA = []
columnB = []
columnC = []

data = document.body.innerText.trim()

rows = data.split(' ')
for row in rows
  split = row.split(',')
  columnA.push parseInt split[0], 10
  columnB.push parseInt split[1], 10

for number, index in columnA
  for times in [1..columnB[index]]
    columnC.push number

table = document.createElement 'table'

for value, index in columnC
  row = document.createElement 'tr'

  if columnA[index] and columnB[index]
    row.innerHTML = """
      <td>#{ columnA[index] }</td>
      <td>#{ columnB[index] }</td>
      <td>#{ columnC[index] }</td>
    """

  else
    row.innerHTML = """
      <td colspan="2"></td>
      <td>#{ columnC[index] }</td>
    """

  table.appendChild row

document.body.innerHTML = ''
document.body.appendChild table