JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Заголовок</h1>
<h2>Заголовочек</h2>
<p ><span id="r">Красный</span> <span id="o">оранжевый</span> <span id="y">жёлтый</span> <span id="g">зелёный</span> <span id="b">голубой</span> <span id="b">синий</span> <span id="v">феолетовый</span> </p>

CSS

#r {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

#o {
  color: orange;
  font-size: 24px;
  font-weight: bold;
}

#y {
  color: yellow;
  font-size: 24px;
  font-weight: bold;
}

#g {
  color: green;
  font-size: 24px;
  font-weight: bold;
}

#b {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

#v {
  color: violet;
  font-size: 24px;
  font-weight: bold;
}