JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
<span>Nos Solutions</span>
</h2>
<h2>
<span>Nos Solutions</span>
</h2>
<h2>
<span>Nos Solutions</span>
</h2>

CSS

h2 {
  width: 300px;
  background:pink;
  
  span {
  color: #0055B8;
  background: linear-gradient(to right, #0055B8 0%, #00CE7C 50%, #93D500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
  /* obliger de mettre le & */
  &:nth-of-type(2)
  {
    text-align: center;
  }
  
  &:nth-of-type(3)
  {
    text-align: right;
  }
}