JSFiddle - React, Tailwind, and code Playground

Create Theme JSON

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<pre class="debug"></pre>

CSS

pre {
  overflow: auto;
	width: 90%;
  margin: 2% auto;
}

JavaScript

var clientConfig = {
  AxixLineColor: "#6c9f1f",
  ColumnsColor: "#337ab7",
  appListLoader: "#ef6c70",
  appListLoginOverlayColor: "#ffffff",
  appListLoginOverlayNavBar: "rgba(255,255,255,0.95)",
  appListLoginOverlayNavBarTextColor: "#ffffff",
  appListLoginOverlayTextColor: "#ffffff",
  appListProgressBarColor: "#ef6c70",
  bodyBackground: "#393939",
  bodyFontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif",
  bodyFontSize: "16px",
  bodyFontWeight: "normal",
  bodyLineHeight: "24px",
  bodyTextColor: "#ffffff",
  cellBorderBottom: "none",
  cellBorderLeft: "none",
  cellBorderRight: "none",
  cellBorderTop: "none",
  cellPadding: "0px",
  chatBackgroundColor: "#f8f8f8",
  chatConvoListActiveBackground: "rgba(51,122,183,0.06)",
  chatConvoListActiveBorder: "#337ab7",
  chatConvoListBackgroundColor: "#ffffff",
  chatInputActiveBorder: "#337ab7",
  chatInputBarBackground: "#f2f2f2",
  chatInputBorder: "#ebebeb",
  chatOthersBubbleBackground: "#ffffff",
  chatOthersBubbleTextColor: "#333333",
  chatOwnBubbleBackground: "#337ab7",
  chatOwnBubbleTextColor: "#ffffff",
  chatProfileTopBarBackground: "rgba(252,252,252,0.85)",
  chatProfileTopBarTextColor: "#333333",
  chatTextColor: "#333333",
  chevronColor: "#333333",
  chevronSeparator: "1px solid #337ab7",
  descriptionColor: "#ffffff",
  descriptionSize: "14px",
  descriptionWeight: "normal",
  directoryActiveListChevronColor: "#ffffff",
  directoryActiveListColor: "#337ab7",
  directoryActiveListDescColor: "#ffffff",
  directoryActiveListDescSize: "12px",
  directoryActiveListDescWeight: "normal",
  directoryActiveListTagsColor: "#dddddd",
  directoryActiveListTagsTextColor: "#333333",
  directoryActiveListTitleColor: "#ffffff",
  directoryActiveListTitleSize: "16px",
  directoryActiveListTitleWeight: "normal",
  directoryBackgroundColor: "#ffffff",
  directoryListBorderColor: "1px solid rgba(51, 51, 51, 0.2)",
  directoryListChevronColor: "#333333",
  directoryListDescColor: "#333333",
 ...