JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="showIt"></div>

JavaScript

var cssVars = [
{ "variable": "$white", "color":"#ffffff;", "example":"-------"},
{ "variable": "$black", "color":"#000000;", "example":"-------"},

{ "variable": "$dark", "color":"#363942;", "example":"-------"},
{ "variable": "$gold", "color":"#d2a11c;", "example":"-------"},

{ "variable": "$primary", "color":"#67707b;", "example":"-------"},

{ "variable": "$light-gray", "color":"#c6cbd0;", "example":"-------"},
{ "variable": "$lighter-gray", "color":"#f4f4f4;", "example":"-------"},
{ "variable": "$gray", "color":"#e8e9eb;", "example":"-------"},


{ "variable": "$navbar", "color":"#4d5057;", "example":"-------"},
{ "variable": "$dark-blue", "color":"#000a47;", "example":"-------"},
{ "variable": "$blue", "color":"#24558e;", "example":"-------"},
{ "variable": "$blue-hover", "color":"#4886d0;", "example":"-------"},
{ "variable": "$light-blue", "color":"#2d66ac;", "example":"-------"},
{ "variable": "$contact-us", "color":"#ffffff;", "example":"-------"},
{ "variable": "$contact-us-text", "color":"#000a47;", "example":"-------"},
{ "variable": "$contact-us-border", "color":"#000a47;", "example":"-------"},


{ "variable": "$orange", "color":"#ff6600;", "example":"-------"},
{ "variable": "$orange-hover", "color":"#ff652f;", "example":"-------"},

{ "variable": "$green", "color":"#29cf4d;", "example":"-------"},

{ "variable": "$highlight", "color":"#1da33a;", "example":"-------"},

{ "variable": "$badge", "color":"#14a76c;", "example":"-------"},

{ "variable": "$secondary-border", "color":"#4d5057;", "example":"-------"},
{ "variable": "$secondary-text", "color":"#808080;", "example":"-------"},
{ "variable": "$icon-absorbancy", "color":"#4d5057;", "example":"-------"},



{ "variable": "$primaryType", "color":"LatoWeb, Tahoma, sans-serif;", "example":"-------"},
{ "variable": "$secondaryType", "color":"Martel, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;", "example":"-------"},
{ "variable": "$iconFont", "color":"'northshore-icons';",...