JSFiddle - React, Tailwind, and code Playground

by Casey Falk

HTML

<div>Here's some sample text.</div>

<br/>
font-style
<select name="font-style">
    <option value="normal">normal</option>
    <option value="italic">italic</option>
    <option value="oblique">oblique</option>
</select>

<br/>
font-weight
<select name="font-weight">
    <option value="normal">normal</option>
    <option value="100">100</option>
    <option value="200">200</option>
    <option value="300">300</option>
    <option value="400">400</option>
    <option value="500">500</option>
    <option value="600">600</option>
    <option value="700">700</option>
    <option value="800">800</option>
    <option value="900">900</option>
</select>

<br/>
text-shadow
<select name="text-shadow">
    <option value="none">none</option>
    <option value="1px 1px 1px silver">1px 1px 1px silver</option>
    <option value="1px 1px 3px silver">1px 1px 3px silver</option>
    <option value="1px 1px 5px silver">1px 1px 5px silver</option>    <option value="1px 1px 10px silver">1px 1px 10px silver</option>
</select>

<br/>
letter-spacing
<select name="letter-spacing">
    <option value="initial">initial</option>
    <option value="-1px">-1px</option>
    <option value="-0.5px">-0.5px</option>
    <option value="0.5px">0.5px</option>
    <option value="1px">1px</option>
    <option value="2px">2px</option>
</select>

<hr>
(Less supported...)
<br/>
font-smooth
<select name="font-smooth">
    <option value="auto">auto </option>
    <option value="never">never</option>
    <option value="always">always</option>
</select>

<br/>
-webkit-font-smoothing
<select name="-webkit-font-smoothing">
    <option value="initial">initial </option>
    <option value="none">none</option>
    <option value="antialiased ">antialiased </option>
    <option value="subpixel-antialiased">subpixel-antialiased</option>
</select>

CSS

body{ font-family:arial; }

JavaScript

$("select").change(function() {
    var key = $(this).attr("name");
    var val = $(this).val();
   $("div").css(key, val) 
});