JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Заголовок</h1>
<h2>Заголовочек</h2>
<p id="first">Я</p>
<p id="second"> Танцую </p>
<p id="three">Ча</p>
<p id="four">-</p>
<p id="five">Ча</p>
<p id="six">И да</p>
<p id="seven">я люблю шкодить</p>

CSS

p {
font-size: 24px;
font-weight: bold;
}

#first {
  color: red;
  font-size: 24px;
  font-weight: bold;
}
#second {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}
#three {
  color: yellow;
  font-size: 24px;
  font-weight: bold;
}
#four {
color: lightgreen;
font-size: 24px;
font-weight: bold;
}
#five {
  color: green;
  font-size: 24px;
  font-weight: bold;
}
#six {
  color: orange;
  font-size: 24px;
  font-weight: bold;
}
#seven {
  color: lightyellow;
  font-size: 24px;
  font-weight: bold;
}