JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/radium.js"></script>
<div id="app">
</div>

Babel + JSX

const settings = {
  animation: {
    speed: "400ms",
    speedUi: "800ms"
  },
  color: {
    darkGray: "#2c3643",
    titleGray: "#3b444f",
    featureCopy: "#67747c",
    lpBlue: "#297cbb",
    blue: "#297cbb",
    subduedGray: "#dbe6ec",
    orange: "#ffc83f",
    yellow: "#feef6d",
    active: "#0fdebd",
    red: "#dc221a",
    gray: "#e4e4e4",
    articlesBlurb: "#7e838b",
    text: "#474f5a",
    footerCopyright: "#bfc2c6",
    lightText: "#898e95",
    fontColorLight: "#959aa0",
    lightSlate: "#e4eaf8",
    activeBackgroundColor: "#f4f5f8",
    lightBlue: "#bdcee3",
    white: "#fff",
    black: "#000",
    topPlaceNumber: "#a7a9ae",
    detailHeaderSmall: "#b6c3ca",
    socialNetworkButton: "#e5e7ed",
    alertWarning: "#dc221a",
    alertNotice: "#feef6d",
    alertDefault: "#3b444f",
    facebook: "#3b5998",
    twitter: "#00aced",
    pinterest: "#cb2027"
  },
  components: {
    header: {
      height: "13rem",
      heightMobile: "5rem"
    }
  },
  default: {
    minWidth: "32rem",
    maxWidth: "129rem",
    spacing: "1.5rem",
    gutter: "3rem",
    radius: ".2rem",
    baseSize: "1.8em"
  },
  font: {
    family: {
      sansSerif: [
        "'Helvetica Neue'",
        "'Helvetica'",
        "'Arial'",
        "sans-serif"
      ],
      serif: [
        "'Georgia'",
        "'Times'",
        "'Times New Roman'",
        "serif"
      ],
      benton: [
        "'Benton Sans'",
        "'Helvetica Neue'",
        "'Helvetica'",
        "'Arial'",
        "sans-serif"
      ],
      miller: [
        "'Miller Daily'",
        "'Georgia'",
        "'Times'",
        "'Times New Roman'",
        "serif"
      ]
    }
  },
  grid: {
    columns: 12,
    columnWidth: "8rem",
    container: "129rem",
    gutterPosition: "before",
    gutters: "3 / 8",
    math: "fluid",
    output: "float"
  },
  layout: {
    gutter: "3rem",
    borderRadius: ".4rem",
    avatarSize: "4rem"
  },
  media: {
    min: {
      320: "20em",
      360: "22.5em",
     ...