JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text_block">
    <center>sample text in sample block</center>
</div>


<script>
$('.text_block').flowtype();
</script>

CSS

.text_block {
    color: white;
    background-color: red;
    width: 80%;
    height: 30%;
    font-size: 2rem;
}


body {
 font-size: 18px;
}
h1,h2,h3,h4,h5,h6,p {
 line-height: 1.45;
}
h1 { font-size: 4em; }
h2 { font-size: 3em; }
h3 { }

JavaScript

// Load in the flowtype library
(function(e){e.fn.flowtype=function(t){var n=e.extend({maximum:9999,minimum:1,maxFont:9999,minFont:1,fontRatio:35},t),r=function(t){var r=e(t),i=r.width(),s=i>n.maximum?n.maximum:i<n.minimum?n.minimum:i,o=s/n.fontRatio,u=o>n.maxFont?n.maxFont:o<n.minFont?n.minFont:o;r.css("font-size",u+"px")};return this.each(function(){var t=this;e(window).resize(function(){r(t)});r(this)})}})(jQuery)


$(document).ready(function(){

    $('.text_block').flowtype({
     minimum   : 500,
     maximum   : 1200,
     minFont   : 12,
     maxFont   : 40,
     fontRatio : 30
    });
    
});