JSFiddle - React, Tailwind, and code Playground

by Yonas Hailu

HTML

<svg>
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" style="stop-color: deepPink"></stop>
            <stop offset="100%" style="stop-color: #009966"></stop>
        </linearGradient>
    </defs>
   
   <text id="text" x="20" y="40" style="dominant-baseline: middle;  letter-spacing: -0.2px; font-weight: 700; font-size: 32px; font-family: Helvetica; fill-opacity: 1; transform-origin: 0px 0px 0px;  opacity: 0.7;text-transform: uppercase;" class="" fill="url(#gradient)">Courage</text>
   
</svg>

CSS

#text {    
    dominant-baseline: middle;
    text-anchor: middle;
    letter-spacing: -0.8px;
    font-weight: 700;
    font-size: 12px;
    font-family: Helvetica;
    fill-opacity: 1;
    fill: rgb(249, 100, 83);
    transform-origin: 0px 0px 0px;
    transform: matrix(19.0956, 0, 0, 19.0956, 0, 0);
    opacity: 0.7;
}