JSFiddle - React, Tailwind, and code Playground

HTML

<p class="backgroundAdd"> Something interesting</p>
 <p class="backgroundAdd otherClass"> Second string </p>

CSS

.backgroundAdd {
    font-size: 1.6em;
    color: red;
    position: block;
	text-align: center;
}

.forChrom {

    background: linear-gradient(45deg, #38393A 33%, #B7C1D0 66%, #E7EEF9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

JavaScript

// Проверка что за брайзер ?

function getBrowserId () {
  var
  aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
      sUsrAg = navigator.userAgent, 
      nIdx = aKeys.length - 1;

  for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
  return nIdx
}

if (getBrowserId() == 0) {
  alert("You're use EX")
}	else if (getBrowserId() == 1){
  alert("You're use FireFox")
}	else if (getBrowserId() == 2){
  alert("You're use Safari")
}	else if (getBrowserId() == 3){
  alert("You're use Chrom")
}	else if (getBrowserId() == 4){
  alert("You're use Opera")
}	else (alert("Hey, what are you use?"));

// Добавление класса     
var addElement = document.getElementsByClassName("backgroundAdd");


if 	(getBrowserId() == 3) {	
	for (var i = 0; i < addElement.length; i++) {
  	addElement[i].classList.add('forChrom');
  }
}