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

.fontBaselineCalculation {
	visibility:hidden;
	height: 400px;
}
.fontBaselineCalculation span:after {
	content:'';
	height:100%;
	display:inline-block;
}

.fontBaselineCalculation2 {
	visibility:hidden;
}
.fontBaselineCalculation2 span:after {
	content:'';
	height:100%;
	display:inline-block;
}

JavaScript

var allFonts = [
		'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'
	];
var fonts = ['open sans', 'sigmar one', 'libre baskerville', 'eater'];
var fontSizes = [20, 24, 36.75, 67.68, 200];

for(var i = 0; i < fonts.length; i++) {
	var font = fonts[i];
    for(var j = 0; j < fontSizes.length; j++) {
    	var fontSize = fontSizes[j];
        
        $('<div style="font-family: ' + font + ';">' + font + ' ' + fontSize + 'px-1: ' + getBaseline1(font, fontSize) + '</div>').appendTo('body');
        $('<div style="font-family: ' + font + ';">' + font + ' ' + fontSize + 'px-2: ' + getBaseline2(font, fontSize) + '</div>').appendTo('body');
        
        $('body').append('<p>');
    }
}

function getBaseline1(fontFamily, fontSize) {
	// Based off of https://github.com/georgecrawford/font-baseline
    var TEST_FONT_SIZE = 200;
    var div = document.createElement('div');
    var strut = document.createElement('span');
    var container = document.body;

    strut.textContent = 'T';
    div.appendChild(strut);
    div.classList.add('fontBaselineCalculation');
    div.style['font-family'] = fontFamily;
   ...