JSFiddle - React, Tailwind, and code Playground

by Matt_Coughlin

HTML

<div class="content">
    <p class="font1"><b>12px H</b><i>H 9pt</i></p>
    <p class="font2"><b>16px H</b><i>H 12pt</i></p>
    <p class="font3"><b>20px H</b><i>H 15pt</i></p>
    <p class="font4"><b>30px H</b><i>H 22pt</i></p>
</div>

CSS

.content {font-family: Arial, sans-serif;}
p {margin:0; padding:0;}
b {font-weight: normal;}
i {font-style: normal;}

.font1 {line-height:15px;}
.font1 b {font-size:12px;}
.font1 i {font-size:9pt;}

.font2 {line-height:20px;}
.font2 b {font-size:16px;}
.font2 i {font-size:12pt;}

.font3 {line-height:24px;}
.font3 b {font-size:20px;}
.font3 i {font-size:15pt;}

.font4 {line-height:36px;}
.font4 b {font-size:30px;}
.font4 i {font-size:22pt;}