JSFiddle - React, Tailwind, and code Playground

by Paul Leech

HTML

<div id="showArray"></div>

JavaScript

var cssVars = [
				{ "variable": "$white", "value":"#ffffff;", "example": "---" },
				{ "variable": "$black", "value":"#000000;", "example": "---" },
				{ "variable": "$dark", "value":"#363942;", "example": "---" },
				{ "variable": "$gold", "value":"#d2a11c;", "example": "---" },
				{ "variable": "$primary", "value":"#67707b;", "example": "---" },
				{ "variable": "$light-gray", "value":"#c6cbd0;", "example": "---" },
				{ "variable": "$lighter-gray", "value":"#f4f4f4;", "example": "---" },
				{ "variable": "$gray", "value":"#e8e9eb;", "example": "---" },
				{ "variable": "$navbar", "value":"#4d5057;", "example": "---" },
				{ "variable": "$dark-blue", "value":"#000a47;", "example": "---" },
				{ "variable": "$blue", "value":"#24558e;", "example": "---" },
				{ "variable": "$blue-hover", "value":"#4886d0;", "example": "---" },
				{ "variable": "$light-blue", "value":"#2d66ac;", "example": "---" },
				{ "variable": "$contact-us", "value":"#14a76c;", "example": "---" },
				{ "variable": "$contact-us-text", "value":"#ffffff;", "example": "---" },
				{ "variable": "$orange", "value":"#ff6600;", "example": "---" },
				{ "variable": "$orange-hover", "value":"#ff822f;", "example": "---" },
				{ "variable": "$green", "value":"#29cf4d;", "example": "---" },
				{ "variable": "$highlight", "value":"#1da33a;", "example": "---" },
				{ "variable": "$badge", "value":"", "example": "---" },
				{ "variable": "$red-flag", "value":"#ff0033;", "example": "---" },
				{ "variable": "$green-flag", "value":"#1da33a;", "example": "---" },
				{ "variable": "$blue-flag", "value":"#2c70db;", "example": "---" },
				{ "variable": "$yellow-flag", "value":"#ecba11;", "example": "---" },
				{ "variable": "$purple-flag", "value":"#52248e;", "example": "---" },
				{ "variable": "$lightblue-flag", "value":"#15ccd6;", "example": "---" },
				{ "variable": "$lightgreen-flag", "value":"#94bc1a;", "example": "---" },
				{ "variable": "$pink-flag", "value":"#c01366;",...