JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Заголовок</h1>
<h2>Заголовочек</h2>
<p id="first">Каждый</p>
<p id="second">Охотник</p>
<p id="third">Желает</p>
<p id="fourth">Знать</p>
<p id="fifth">Где</p>
<p id="sixth">Сидит</p>
<p id="seventh">Фазан</p>

CSS

#first {
  color: red;
  font-size: 16px;
  font-weight: bold;
}

#second {
  color: orange;
  font-size: 16px;
  font-weight: bold;
}

#third {
  color: yellow;
  font-size: 16px;
  font-weight: bold;
}

#fourth {
  color: green;
  font-size: 16px;
  font-weight: bold;
}

#fifth {
  color: lightblue;
  font-size: 16px;
  font-weight: bold;
  }

#sixth {
  color: blue;
  font-size: 16px;
  font-weight: bold;
}

#seventh {
  color: violet;
  font-size: 16px;
  font-weight: bold;
}