JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Alfa+Slab+One|Anton|Architects+Daughter|Bangers|Berkshire+Swash|Bonbon|Chewy|Coming+Soon|Courgette|Crafty+Girls|Dancing+Script|Diplomata|Diplomata+SC|Eater|Erica+One|Ewert|Fascinate+Inline|Faster+One|Fontdiner+Swanky|Fredoka+One|Gloria+Hallelujah|Homemade+Apple|Indie+Flower|Kaushan+Script|Kavoon|Libre+Baskerville|Lobster|Lobster+Two|Londrina+Shadow|Love+Ya+Like+A+Sister|Luckiest+Guy|Modak|Monofett|Montserrat+Subrayada|Noto+Sans|Open+Sans|Open+Sans+Condensed:300|Oswald|Overlock|Pacifico|Pathway+Gothic+One|Permanent+Marker|Petit+Formal+Script|Pirata+One|Playball|Rock+Salt|Rubik+Mono+One|Seymour+One|Shadows+Into+Light|Sigmar+One|Tangerine|Ubuntu" type="text/css" rel="stylesheet">

CSS

.font-baseline {
    visibility:hidden;
    height:100px;
    font-size: 1.33;
}
.font-baseline span:after {
    content:'';
    height:100%;
    display:inline-block;
}

JavaScript

var fonts = [
		'Overlock',
		'Crafty Girls',
		'Noto Sans',
		'Ubuntu',
		'Lobster',
		'Anton',
		'Shadows Into Light',
		'Libre Baskerville',
		'Sigmar One',
		'Open Sans',
		'Oswald',
		'Open Sans Condensed:300',
		'Indie Flower',
		'Pacifico',
		'Pathway Gothic One',
		'Dancing Script',
		'Coming Soon',
		'Courgette',
		'Bangers',
		'Luckiest Guy',
		'Homemade Apple',
		'Alfa Slab One',
		'Modak',
		'Seymour One',
		'Permanent Marker',
		'Eater',
		'Erica One',
		'Petit Formal Script',
		'Fascinate Inline',
		'Fredoka One',
		'Gloria Hallelujah',
		'Fontdiner Swanky',
		'Tangerine',
		'Monofett',
		'Diplomata SC',
		'Pirata One',
		'Love Ya Like A Sister',
		'Londrina Shadow',
		'Architects Daughter',
		'Montserrat Subrayada',
		'Kavoon',
		'Rubik Mono One',
		'Diplomata',
		'Chewy',
		'Faster One',
		'Berkshire Swash',
		'Abril Fatface',
		'Rock Salt',
		'Bonbon',
		'Lobster Two',
		'Ewert',
		'Playball',
		'Kaushan Script'
];
fonts.sort();

for(var i = 0; i < fonts.length; i++) {
	var font = fonts[i];
    
    var info = getFontBaseline(font);
    $('body').append(font + ': ' + info.offset.toFixed(2) + ' (' + info.multiplier.toFixed(4) + ', ' + getFontBaseline(font, 40).multiplier.toFixed(4) + ')').append('<br>');
}

function getFontBaseline(fontFamily, fontSize) {
	if(!fontSize) {
    	fontSize = 20;
    }

	var div = document.createElement('div');
    var strut = document.createElement('span');
    var container = document.body;
    var computedStyle, baselineHeight, strutHeight, lineHeight;
    
    strut.textContent = 'T';
    div.appendChild(strut);
    div.classList.add('font-baseline');
    div.style['font-family'] = fontFamily;
    div.style['font-size'] = fontSize + 'px';
    container.appendChild(div);
    
    computedStyle = window.getComputedStyle(strut);
    lineHeight = parseFloat(computedStyle.lineHeight, 10);
    
    strut.style.lineHeight = 0;
    strutHeight = strut.offsetHeight;
    baselineHeight = strut.offsetTop + strutHeight -...