JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

<div class="spacer"></div>


<div class="f1">Button Training</div>

<div class="f2">Button Training</div>

<div class="f3">Button Training</div>

<div class="f4">Button Training</div>

<div class="spacer"></div>

<div class="f1lh">Button Training</div>

<div class="f2lh">Button Training</div>

<div class="f3lh">Button Training</div>

<div class="f4lh">Button Training</div>

CSS

.f1, .f2, .f3, .f4, .f1lh, .f2lh, .f3lh, .f4lh {font-size:16px;line-height:0px;display:inline-block;text-align:center;padding:20px;background-color:#999999;color:white;margin:4px;border-radius:8px;}

.f1 {font-family:Lato;}
.f2 {font-family:"Roboto", serif;}
.f3 {font-family:Arial;}
.f4 {font-family:Open Sans;}

.f1lh {font-family:Lato; padding:0 10px;line-height:30px;height:30px;}
.f2lh {font-family:"Roboto", serif; padding:0 10px;line-height:30px;height:30px;}
.f3lh {font-family:Arial; padding:0 10px;line-height:30px;height:30px;}
.f4lh {font-family:Open Sans; padding:0 10px;line-height:30px;height:30px;}

.spacer {height:40px;}