JSFiddle - React, Tailwind, and code Playground

HTML

<div style="font-family: 'sans-serif'; font-style: normal">Regular</div>
<div style="font-family: 'sans-serif'; font-style: italic">Italic</div>
<div style="font-family: 'sans-serif'; font-weight: bold">Bold</div>
<div style="font-family: 'sans-serif'; font-weight: bold; font-style: italic">Bold-italic</div>

<div style="font-family: 'sans-serif-light'; font-style: normal">Light</div>
<div style="font-family: 'sans-serif-light'; font-style: italic">Light-italic</div>

<div style="font-family: 'sans-serif-thin'; font-style: normal">Thin</div>
<div style="font-family: 'sans-serif-thin'; font-style: italic">Thin-italic</div>

<div style="font-family: 'sans-serif-condensed'; font-style: normal">Condensed regular</div>
<div style="font-family: 'sans-serif-condensed'; font-style: italic">Condensed italic</div>
<div style="font-family: 'sans-serif-condensed'; font-weight: bold">Condensed bold</div>
<div style="font-family: 'sans-serif-condensed'; font-weight: bold; font-style: italic">Condensed bold-italic</div>

<div style="font-family: 'serif'; font-style: normal">Serif Regular</div>
<div style="font-family: 'serif'; font-style: italic">Serif Italic</div>
<div style="font-family: 'serif'; font-weight: bold">Serif Bold</div>
<div style="font-family: 'serif'; font-weight: bold; font-style: italic">Serif Bold-italic</div>

<div style="font-family: 'Droid Sans'; font-style: normal">Droid Sans Regular</div>
<div style="font-family: 'Droid Sans'; font-weight: bold">Droid Sans Bold</div>

<div style="font-family: 'monospace'; font-style: normal">Monospace Regular</div>

CSS

body { font-size: 200%; }