JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checks">

    <img src="https://images.pexels.com/photos/457702/pexels-photo-457702.jpeg" alt="" style="max-width:100%">
        <h2 class="competitive" style="border: 2px solid red; color:green;"><span>3 Tiered Quality Review Process</span></h2>
    </img>

    
</div>

CSS

.checks { 
 position: relative; 
  display: inline-block;
  height: auto;
  max-width: 50%;    
}



.competitive {
 position: absolute;
  display: inline-block;
    top: 0px;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 20px;
    width: 50;
    line-height: 150%;
}

@media all and (min-width: 50px)   {  body  { font-size:9px;  } }
@media all and (min-width: 100px)  {  body  { font-size:10px;  } }
@media all and (min-width: 200px)  {  body  { font-size:11px;  } }
@media all and (min-width: 300px)  {  body  { font-size:12px;  } }
@media all and (min-width: 400px)  {  body  { font-size:13px;  } }
@media all and (min-width: 500px)  {  body  { font-size:14px;  } }
@media all and (min-width: 600px)  {  body  { font-size:15px;  } }

JavaScript

window.onresize = resizeText;

function resizeText()
{
    var heightPercentage = 10;
    var widthPercentage = 100;
    
    var parentHeight = $(".checks").height();
    var parentWidth = $(".checks").width();
    
    $(".competitive").css("height", parentHeight * (heightPercentage / 100) + "px");
    $(".competitive").css("width", parentWidth * (widthPercentage / 100) + "px");
}