JSFiddle - React, Tailwind, and code Playground

HTML

<p class="chars">
  <span class="chars__item chars__item_orange">H</span>
  <span class="chars__item chars__item_lime">E</span>
  <span class="chars__item chars__item_blue">A</span>
  <span class="chars__item chars__item_purple">D</span>
  <span class="chars__item chars__item_blue2">E</span>
  <span class="chars__item chars__item_green">R</span>   
</p>

CSS

.chars__item {
   font-size: 20px;
   font-weight: bold;
}
.char__item_orange {
  color: orange;
}
.chars__item_lime {
  color: lime;
}
.chars__item_blue {
  color: blue;
}
.chars__item_purple {
  color: purple;
}
.chars__item_blue2 {
  color: #0055ff;
}
.chars__item_green {
  color: green;
}