JSFiddle - React, Tailwind, and code Playground

by g30rg3

CSS

body {
  padding-top: 20px;
  padding-left: 20px;
}

.row {
  margin-bottom: 20px;
}

.swatch {
  width: 50px;
  height: 150px;
  display: inline-block;
  border-top: solid thin #808080;
  border-bottom: solid thin #808080;;
}

.swatch:first-of-type {
  border-left: solid thin #808080;;
}

.swatch:last-of-type {
  border-right: solid thin #808080;;
}

.title {
  font-style: italic;
}

JavaScript

let inlineStyles = {
  display: 'inline-block',
  'marginRight': '20px'
};

/*
createRowObject('Color Palette', ["#64bd63", '#F0B518', '#DD5826', '#4D9DCD', '#EEEEEE', '#000000', '#FFFFFF']),
  createRowObject('Three Stage Sentiment', ["#64bd63", '#F0B518', '#DD5826', '#808080']),
  createRowObject('Three Stage Relation', ['#8C41CD', '#D939AD', '#5D4BD0'], inlineStyles),
  createRowObject('Three Stage Relation Alt', ['#002E4C', '#3D94CB', '#668599'], inlineStyles),
  createSpacer(),
  createRowObject('Five Stage Relation', ['#4A385A', '#9545DA', '#7235A7', '#3E1D5A', '#B88AE0'], inlineStyles),
  createRowObject('Five Stage Relation Alt', ['#4D2C44', '#CD36A3', '#9A287B', '#4D143E', '#D578BC'], inlineStyles),
*/

let rows = [
  
  createRowObject('Chart Palette', 
  [
  adjust('#a6cee3',40),'#a6cee3', '#1f78b4',
  adjust('#b2df8a',40),'#b2df8a', '#33a02c',
  adjust('#fb9a99',40),'#fb9a99', '#e31a1c',
  adjust('#fdbf6f',40),'#fdbf6f', '#ff7f00',
  adjust('#cab2d6',40),'#cab2d6', '#6a3d9a',
  adjust('#ffff99',40),'#ffff99', adjust('#ffff99',-40),
  adjust('#b15928',40),'#b15928', adjust('#b15928',-40),
  '#999999','#555555','#000000']),


]


rows.forEach((rowData) => {
  let row = makeRow(rowData.rowStyles);
  row.appendChild(makeTitle(rowData.title));
  rowData.colors.forEach((color) => {
    row.appendChild(makeSwatch(color));
  });


  document.querySelector('body').appendChild(row);
  
  var ta = document.createElement('textarea');
  ta.value = (JSON.stringify([
  adjust('#a6cee3',40),'#a6cee3', '#1f78b4',
  adjust('#b2df8a',40),'#b2df8a', '#33a02c',
  adjust('#fb9a99',40),'#fb9a99', '#e31a1c',
  adjust('#fdbf6f',40),'#fdbf6f', '#ff7f00',
  adjust('#cab2d6',40),'#cab2d6', '#6a3d9a',
  adjust('#ffff99',40),'#ffff99', adjust('#ffff99',-40),
  adjust('#b15928',40),'#b15928', adjust('#b15928',-40),
  '#999999','#555555','#000000'])).replace(/"/gi,"'");

 ...