JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://rawgit.com/davatron5000/FitText.js/master/jquery.fittext.js"></script>
<div class="header">
    <h1 id="myName">PullJosh</h1>
</div>

CSS

body {
    margin:0px;
}
.header {
    width: 100%;
	margin:0px auto;
    
    /*Background Gradient*/
    background: #7c9cde; /* Old browsers */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7c9cde), to(#a7c7eb));
background: -webkit-linear-gradient(#7c9cde 0%, #a7c7eb 100%);
background: -moz-linear-gradient(#7c9cde 0%, #a7c7eb 100%);
background: -o-linear-gradient(#7c9cde 0%, #a7c7eb 100%);
background: linear-gradient(#7c9cde 0%, #a7c7eb 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c9cde', endColorstr='#a7c7eb',GradientType=0 ); /* IE6-9 */
}
.header h1 {
    font-family:'Open Sans';
    font-size:90px;
    line-height:1.1415926535879323;
    padding:3% 0px;
    -webkit-margin-before:0px;
    -webkit-margin-after:0px;
    display:block;
    text-align:center;
    color:white;
}

JavaScript

$(window).resize(function () {
   $("#myName").fitText(0.5, {maxFontSize: '200px'});
});
$("#myName").fitText(0.5, {maxFontSize: '200px'});