JSFiddle - React, Tailwind, and code Playground

HTML

<div id="legend"></div>

JavaScript

var categories = ["foo", "bar", "baz", "qux", "zoo", "yaw"];

var color = d3.scale.ordinal()
    .domain(categories)
    .range(["#98ABC5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c"]);

var legend = d3.select("#legend");

legend.selectAll("div")
    .data(categories)
    .enter()
    .append("div")
    .style("background-color", color)
    .text(function(d) { return d });