JSFiddle - React, Tailwind, and code Playground

HTML

<div>Problem: <span severity="0">{HOST.NAME}{EVENT.NAME}</span></div>
<div>Problem: <span severity="1">{HOST.NAME}{EVENT.NAME}</span></div>
<div>Problem: <span severity="2">{HOST.NAME}{EVENT.NAME}</span></div>
<div>Problem: <span severity="3">{HOST.NAME}{EVENT.NAME}</span></div>
<div>Problem: <span severity="4">{HOST.NAME}{EVENT.NAME}</span></div>
<div>Problem: <span severity="5">{HOST.NAME}{EVENT.NAME}</span></div>

CSS

[severity="0"]{ background-color: #97aab3; padding: 0.5px 3px; color: black; }
[severity="1"]{ background-color: #7499ff; padding: 0.5px 3px; color: darkblue; }
[severity="2"]{ background-color: #ffc859; padding: 0.5px 3px; color: blue; }
[severity="3"]{ background-color: #ffa059; padding: 0.5px 3px; color: darkgreen; }
[severity="4"]{ background-color: #e97659; padding: 0.5px 3px; color: white; }
[severity="5"]{ background-color: #e45959; padding: 0.5px 3px; color: yellow; }