JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Letters
<p>#aa0000</p>
<p>#bb0000</p>
<p>#cc0000</p>
<p>#dd0000</p>
<p>#ee0000</p>
<p>#ff0000</p><!-- ff0000 -->
Numbers
<p>#990000</p>
<p>#880000</p>
<p>#770000</p>
<p>#660000</p>
<p>#550000</p>
<p>#440000</p>
<p>#330000</p>
<p>#220000</p>
<p>#110000</p>
</div>
CSS
*{
border:0;
margin:0;
color:#fff;
text-indent:25px;
}
div p:nth-of-type(1){
background:#aa0000;
}
div p:nth-of-type(2){
background:#bb0000;
}
div p:nth-of-type(3){
background:#cc0000;
}
div p:nth-of-type(4){
background:#dd0000;
}
div p:nth-of-type(5){
background:#ee0000;
}
div p:nth-of-type(6){
background:#ff0000;
}
div p:nth-of-type(7){
background:#990000;
}
div p:nth-of-type(8){
background:#880000;
}
div p:nth-of-type(9){
background:#770000;
}
div p:nth-of-type(10){
background:#660000;
}
div p:nth-of-type(11){
background:#550000;
}
div p:nth-of-type(12){
background:#440000;
}
div p:nth-of-type(13){
background:#330000;
}
div p:nth-of-type(14){
background:#220000;
}
div p:nth-of-type(15){
background:#110000;
}