JSFiddle - React, Tailwind, and code Playground

by juErik

HTML

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Schoolbell' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Neucha|Indie+Flower|Boogaloo|Coming+Soon|Shadows+Into+Light+Two' rel='stylesheet' type='text/css'>    
    
<div id="text">Das Web-App-Tutorial wird gerade neu geschrieben. Wünsche einfach im Forum posten oder mailen. Sehr viele Kapitel sind bereits geschrieben und werden nach und nach online gestellt. Facebook liken und man bekommt Neuerungen mit ...<br />
ä ö ü ß 1 2 3 4 5 6 7 8 9 0</div>

CSS

.fontA{   font-family: 'Gloria Hallelujah', cursive; font-size: 14px; font-weight: 600;  } 
.fontB{   font-family: 'Montserrat', sans-serif; font-size: 14px }
.fontC{   font-family: 'Merienda One', cursive; font-size: 14px }
.fontD{   font-family: 'Gochi Hand', cursive; font-size: 16px;   }
.fontE{   font-family: 'Schoolbell', cursive; font-size: 16px; font-weight: 400;   }


.fontF{   font-family: 'Neucha', cursive; font-size: 16px }
.fontG{   font-family: 'Indie Flower', cursive; font-size: 16px; font-weight: 600; }
.fontH{   font-family: 'Boogaloo', cursive; font-size: 16px;  }
.fontI{   font-family: 'Coming Soon', cursive; font-size: 14px; font-weight: 600; }
.fontJ{   font-family: 'Shadows Into Light Two', cursive; font-size: 14px; font-weight: 600; }

JavaScript

var str = $('#text').html();

$('body').append('<p class="fontB">Montserrat<br />'+str+'</p>');
$('body').append('<p class="fontA">Gloria Hallelujah<br />'+str+'</p>');
$('body').append('<p class="fontC">Merienda One<br />'+str+'</p>');
$('body').append('<p class="fontD">Gochi Hand<br />'+str+'</p>');
$('body').append('<p class="fontE">Schoolbell<br />'+str+'</p>');

$('body').append('<p class="fontF">Neucha<br />'+str+'</p>');
$('body').append('<p class="fontG">Indie Flower<br />'+str+'</p>');
$('body').append('<p class="fontH">Boogaloo<br />'+str+'</p>');
$('body').append('<p class="fontI">Coming Soon<br />'+str+'</p>');
$('body').append('<p class="fontJ">Shadows Into Light Two<br />'+str+'</p>');