JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background-color: black">
    <p class="red">Cherry</p>
    <p class="orange">Orange</p>
    <p class="yellow">Banana</p>
    <p class="green">Granny Smith</p>
    <p class="blue">Blueberry</p>
    <p class="indigo">Boysenberry</p>
    <p class="violet">Huckleberry</p>
</body>

CSS

* {
    margin: 0;
    padding: 0;
    /*font-family: Consolas;*/
    /*font-family: Candara;/*
    /*font-family: Calibri;*/
    font-family:"Segoe UI";
    font-variant: small-caps;
    font-size: 48px;
}
.red {
    color: hsl(0, 100%, 50%);
}
.orange {
    color: hsl(30, 100%, 50%);
}
.yellow {
    color: hsl(60, 100%, 50%);
}
.green {
    color: hsl(120, 100%, 50%);
}
.blue {
    color: hsl(210, 100%, 50%);
}
.indigo {
    color: hsl(230, 100%, 50%);
}
.violet {
    color: hsl(274, 100%, 50%);
}