'Changing text color between 3 colors frequently within a paragraph in CSS

I have been working on a personal website and had a design that I had really liked but to effectively do this it requires the color of the text to frequently change inside of each paragraph. My current solution was to have a custom tag that would change the color of the text inside but this method makes the HTML excessively messy. Below there is a snip from the HTML that effectively shows the problem.

import SideLinks from "../components/sideLinks";
import Article from "../components/article";
export default function About() {
  return (
    <div className="about">
      <SideLinks />
      <Article>
        <h1>
          const <white>skills</white> = () =&gt; &#123;
          <br />
        </h1>
        <p>
          const skills = &#123; <br />
          <p>
            "
            <strong>
              <white>Languages</white>
            </strong>
            " : [ "<white>Python</white>", "<white>Javascript</white>", "
            <white>HTML/Css</white>", "<white>MySQL</white>"] <br />"
            <strong>
              <white>General</white>
            </strong>
            " : ["<white>AWS</white>"] <br />"
            <strong>
              <white>Data-analytics</white>
            </strong>
            " : ["<white>Pandas</white>", "<white>Tensorflow</white>", "
            <white>Tableau</white>", "<white>Statistics</white>"]
            <br />"
            <strong>
              <white>Web-development</white>
            </strong>
            " : ["<white>React"</white>, "<white>Redux</white>", "
            <white>Flask</white>"] <br />"
            <strong>
              <white>Soft-skills</white>
            </strong>
            " : ["<white>Problem Solving"</white>, "<white>Learning"</white>, "
            <white>Communication</white>"]{" "}
          </p>
          &#125;; console.log(skills);
        </p>
        <h1>&#125;;</h1>
      </Article>
    </div>
  );
}

My goal is to make the text look like the image below. The code I have shown above does it as intended but I would like to find a method that is more well... realistic to use.

enter image description here



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source