JSFiddle - React, Tailwind, and code Playground

by Eduard Dyckman

HTML

<input type="color">
<table>
  <tbody></tbody>
</table>

CSS

.name {
  font-size: 40px;
  color: #86263b;
  width: 400px;
}
tbody tr:not(:last-child) td {
  border-bottom: 1px solid #aaa;
}
td {
  padding-top: 40px;
}
table {
  border-collapse: collapse;
}

JavaScript

const FONTS = [
	'Graduate',
  'Ruslan Display',
  'Cinzel Decorative',
  'Frijole',
  'Yatra One',
  'Gruppo',
  'Pirata One',
  'Shojumaru'
];
const STYLESHEET_URL = 'https://fonts.googleapis.com/css?family=';
const PHRASE = 'Devilgrass';

for (let font of FONTS) {
	let fontUrl = font.replace(/\s/g, '+');
	$('head').append(`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=${fontUrl}">`);
  
	$('table tbody').append(`
  	<tr>
    	<td class="name" style="font-family: ${font}">${PHRASE}</td>
      <td class="font">${font}</td>
    </tr>
  `);
}

$('input[type="color"]').on('change', function(evt) {
	$('.name').css('color', this.value);
});