JSFiddle - React, Tailwind, and code Playground
by Avi Algaly
HTML
<table id="table" border="0" class="padding:0px;" cellpadding="0" cellspacing="0">
</table>
CSS
table {
height:100px;
}
td {
width:40px;
height:1px;
}
JavaScript
const colors = [
"#000083",
"#000284",
"#000485",
"#000687",
"#000888",
"#000989",
"#000b8a",
"#000d8c",
"#000f8d",
"#00118e",
"#00138f",
"#001590",
"#001792",
"#001893",
"#001a94",
"#001c95",
"#001e97",
"#002098",
"#002299",
"#00249a",
"#00269b",
"#00279d",
"#00299e",
"#002b9f",
"#002da0",
"#002fa1",
"#0031a3",
"#0033a4",
"#0035a5",
"#0036a6",
"#0038a8",
"#003aa9",
"#003caa",
"#003fab",
"#0042ad",
"#0045ae",
"#0048af",
"#004bb1",
"#004fb2",
"#0152b3",
"#0155b5",
"#0158b6",
"#015bb7",
"#015eb9",
"#0161ba",
"#0164bc",
"#0167bd",
"#016abe",
"#016ec0",
"#0171c1",
"#0174c2",
"#0277c4",
"#027ac5",
"#027dc6",
"#0280c8",
"#0283c9",
"#0286ca",
"#0289cc",
"#028ccd",
"#0290ce",
"#0293d0",
"#0296d1",
"#0299d2",
"#029cd4",
"#039fd5",
"#03a2d7",
"#03a5d8",
"#03a8d9",
"#03abdb",
"#03afdc",
"#03b2dd",
"#03b5df",
"#03b8e0",
"#03bbe1",
"#03bee3",
"#03c1e4",
"#03c4e5",
"#04c7e7",
"#04cae8",
"#04cde9",
"#04d1eb",
"#04d4ec",
"#04d7ed",
"#04daef",
"#04ddf0",
"#04e0f2",
"#04e3f3",
"#04e6f4",
"#04e9f6",
"#05ecf7",
"#05f0f8",
"#05f3fa",
"#05f6fb",
"#05f9fc",
"#05fcfe",
"#05ffff",
"#09fffb",
"#0dfff7",
"#11fff3",
"#15ffef",
"#19ffeb",
"#1cffe7",
"#20ffe3",
"#24ffdf",
"#28ffdb",
"#2cffd7",
"#30ffd3",
"#34ffcf",
"#38ffcb",
"#3cffc7",
"#40ffc3",
"#44ffbf",
"#47ffbb",
"#4bffb7",
"#4fffb3",
"#53ffaf",
"#57ffab",
"#5bffa7",
"#5fffa3",
"#63ff9f",
"#67ff9b",
"#6bff97",
"#6eff93",
"#72ff8f",
"#76ff8b",
"#7aff87",
"#7eff83",
"#82ff80",
"#86ff7c",
"#8aff78",
"#8eff74",
"#92ff70",
"#96ff6c",
"#99ff68",
"#9dff64",
"#a1ff60",
"#a5ff5c",
"#a9ff58",
"#adff54",
"#b1ff50",
"#b5ff4c",
"#b9ff48",
"#bdff44",
"#c1ff40",
"#c4ff3c",
"#c8ff38",
"#ccff34",
"#d0ff30",
"#d4ff2c",
"#d8ff28",
"#dcff24",
"#e0ff20",
...