JSFiddle - React, Tailwind, and code Playground

HTML

<label>
  <input type="checkbox" />
  <span>
    This is the start of the paragraph with fading text
  </span>
  <p>This is the start of the paragraph with fading text no longer fading and the rest of the content shown.</p>

</label>

CSS

label {
  display: flex;
}

input[type="checkbox"] {
  display: none;
}

span::before {
  content: "►";
}

p {
  display: none;
  margin: 0;
}

p::before {
  content: "▼";
  margin-right: 4px;
}

input[type="checkbox"]:checked ~ span {
  display: none;
}

input[type="checkbox"]:checked ~ p {
  display: block;
}