JSFiddle - React, Tailwind, and code Playground

by cookies

HTML

<script type="text/javascript">
var fontexample = null, fontname = null;
function sfe(me, my) { /* show font example */
if (fontexample) fontexample.style.display = 'none'; // = 'hiddenrow';
if (fontname) fontname.style.border = 'solid 2px gray';
me = document.getElementById(me);
self.status = me;
me.style.display = ''; //className = '';
my.style.border = 'outset 2px green';
fontexample = me;
fontname = my;
}
</script>
<style type="text/css">
/* .hiddenrow { display: none } */
</style>
<table><tr><th onclick="sfe('fontfamily', this)" id="fontfamilyth">Font family</th>
<th onclick="sfe('fontstyle', this)" id="fontstyleth">Font style</th>
<th onclick="sfe('fontvariant', this)" id="fontvariantth">Font variant</th>
<th onclick="sfe('fontweight', this)" id="fontweightth">Font weight</th>
<th onclick="sfe('fontsize', this)" id="fontsizeth">Font size</th>
</tr>
</table>
<table height="200" width="400" style="border: solid 2px green">
<tr id="fontfamily"><td colspan="0"><p>To change the typeface, you'll have
to use the <code>font-family</code> name.</p>
<pre>&lt;span style="font-family: georgia">Georgia on my mind&lt;/span></pre>
<p><span style="font-family: georgia">Georgia on my mind</span></p></td></tr>
<tr class="hiddenrow" id="fontsize"><td colspan="0"><p>To change the font size, you'll have
to use the <code>font-size</code>.</p>
<pre>&lt;span style="font-size: larger; font-family: georgia">Georgia on my mind&lt;/span></pre>
<p><span style="font-size: larger; font-family: georgia">Georgia on my mind</span></p>
<p>You can use values of larger and smaller, or set values
in px (e.g., 20px), or pt (e.g., 12pt).</p></td></tr>
<tr id="fontstyle"><td colspan="0"><p>To change the font style,
you'll use font-style.</p>
<pre>&lt;span style="font-style: oblique; font-family: georgia">Georgia on my mind&lt;/span></pre>
<p><span style="font-style: oblique; font-family: georgia">Georgia on my mind</span></p>
<p>Values of normal, italic, and oblique are may be...