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");
	console.log(addElement.classList);
   
   if 	(getBrowserId() == 3) {	
			 addElement.classList.add("forChrom");

 		 }