HTML code

code.css

.code {
  background: var(--grey-color);
  padding: 2em;
}

.code_line {
  display: block;
}

.code_line--tag {
  color: var(--tag-color);
}
.code_line--attribute {
  color: var(--attribute-color);
}
.code_line--value {
  color: var(--value-color);
}

index.html

<div class="code">
  <code class="code_line">
    <span class="code_line--tag">&lt;h1</span> <span class="code_line--attribute">class=</span><span class="code_line--value">&quot;h1&quot;</span><span class="code_line--blue">&gt;</span>Eat, sleep, code, and repeat!<span class="code_line--tag">&lt;&sol;h1&gt;</span>
  </code>
  <code class="code_line">
    <span class="code_line--tag">&lt;h2</span> <span class="code_line--attribute">class=</span><span class="code_line--value">&quot;h2&quot;</span><span class="code_line--blue">&gt;</span>Eat, sleep, code, and repeat!<span class="code_line--tag">&lt;&sol;h2&gt;</span>
  </code>
 </div>