JSFiddle - React, Tailwind, and code Playground

by okke

HTML

<h1>Lorem <b>ipsum</b></h1>
<h2>Lorem <b>ipsum</b></h2>
<h3>Lorem <b>ipsum</b></h3>

<hr>

<div class="num">
<h1>Lorem <b>ipsum</b></h1>
<h2>Lorem <b>ipsum</b></h2>
<h3>Lorem <b>ipsum</b></h3>
</div>

<hr>

<h1 class="f100">Lorem ipsum</h1>
<h1 class="f200">Lorem ipsum</h1>
<h1 class="f300">Lorem ipsum</h1>
<h1 class="f400">Lorem ipsum</h1>
<h1 class="f500">Lorem ipsum</h1>
<h1 class="f600">Lorem ipsum</h1>
<h1 class="f700">Lorem ipsum</h1>
<h1 class="f800">Lorem ipsum</h1>
<h1 class="f900">Lorem ipsum</h1>

CSS

h1, h2, h3 { font-weight:bold; font-family:sans-serif; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 16px; }

.num h1, 
.num h2, 
.num h3 { font-weight:700; }
.num b { font-weight:900; }

.f100 { font-weight: 100; }
.f200 { font-weight: 200; }
.f300 { font-weight: 300; }
.f400 { font-weight: 400; }
.f500 { font-weight: 500; }
.f600 { font-weight: 600; }
.f700 { font-weight: 700; }
.f800 { font-weight: 800; }
.f900 { font-weight: 900; }