JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="box">
        <p id="first">
          <strong class="carrot">C</strong>ascading
          <strong class="spinach">S</strong>tyle
          <strong class="spinach">S</strong>heets
        </p>
    </div>
    <div class="box">
        <p id="second">
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
     </div>
  </body>

CSS

strong {
    color: red;
}
.carrot {
    color: orange;
}
.spinach {
    color: green;
}
#first {
    font-style: italic;
}

div.box {
    width: 300px;
    padding: 25px;
    border: 2px solid navy;
    margin: 25px;
}

JavaScript

console.log(document.getElementsByClassName('carrot'));