JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<div class="fw-text">
    <div class="fw-line">WEED MAN</div>
    <div class="fw-line">BARRIE</div>
    <div class="fw-line">IS SO COOL</div>
    <div class="fw-line">BECAUSE</div>
    <div class="fw-line">THEY ROCK</div>
</div>

<div class="fw-text">
    <div class="fw-line">WEED MAN</div>
    <div class="fw-line">SOUTH WEST NOVA</div>
</div>

<div class="fw-text">
    <div class="fw-line">WEED MAN</div>
    <div class="fw-line">ANTIGONISH</div>
</div>

<div class="fw-text">
    <div class="fw-line">WEED MAN</div>
    <div class="fw-line">ST. CATHARINES</div>
</div>

<div class="fw-text">
    <div class="fw-line">WEED MAN</div>
    <div class="fw-line">AJAX</div>
</div>

CSS

body {
    color: green;
}
.fw-text {
    width: 400px;
    margin: 0 auto;
    text-align: left;
    font-family: sans-serif;
    font-weight: 900;
    margin-bottom: 30px;
}
.fw-line {
    display: inline-block;
    white-space: nowrap;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    line-height: 1;
}

JavaScript

function scaleText(){
    $('.fw-text').each(function(){
    	var gw = $(this).width(),
            gnh = 0;
        
        $(this).find('.fw-line').each(function(){
        	var h = $(this).height(),
            	w = $(this).width(),
                s = gw / w,
                nh = h * s,
                nw = 100 / s,
                ts = '-moz-transform: scale('+s+');-webkit-transform: scale('+s+');-o-transform: scale('+s+');-ms-transform: scale('+s+');transform: scale('+s+');';
           $(this).attr('style', 'position: absolute; top: '+gnh+'px;left: 0;'+ts+' width: '+nw+'%;');
            gnh += nh;
        });       
	  	
        $(this).attr('style', 'position: relative;height: '+gnh+'px');
    });    
        
}
scaleText();