JSFiddle - React, Tailwind, and code Playground

by csaltyj

HTML

<link href="http://fonts.googleapis.com/css?family=Architects+Daughter|Kreon|Coming+Soon&v2" rel="stylesheet" type="text/css" />
<link href="test.css" rel="stylesheet" type="text/css" />
<div id="header">
    <span id="sam">Sam</span>
    <span id="the-web-guy">(the web guy.)</span>
</div>
<div id="font-picker">
    <button id="arch">Architect's Daughter</button>
    <button id="kreon">Kreon</button>
    <button id="coming">Coming Soon</button>
</div>

CSS

#header {
    font-family: "Coming Soon", cursive;
}

#sam {
    font-size: 4em;
}

#the-web-guy {
    font-size: 1.2em;
}

JavaScript

$('#arch').click(function() {
    $('#header').css('font-family', 'Architects Daughter');
});

$('#kreon').click(function() {
    $('#header').css('font-family', 'Kreon');
});

$('#coming').click(function() {
    $('#header').css('font-family', 'Coming Soon');
});