JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<h1 class="double-line-height">ÇÉéQ'Xxy.jpg</h1>
<h1 class="golden-ratio">ÇÉéQ'Xxy.jpg</h1>
<h1 class="normal-line-height">ÇÉéQ'Xxy.jpg</h1>
<h1 class="one-line-height">ÇÉéQ'Xxy.jpg</h1>
<h1 class="less-line-height">ÇÉéQ'Xxy.jpg</h1>

CSS

h1 {
    margin: 0;
    position: absolute;
    font: 150px Georgia;
    width: 100%;
}

.double-line-height {
    line-height: 2;
    background-color: #ff6138;
}

.golden-ratio {
    line-height: 1.61803398875;
    background-color: #03a388;
    top: calc(37em/150em);
}

.normal-line-height {
    line-height: normal;
    background-color: #79bd8f;
    top: 72px;
}

.one-line-height {
    line-height: 1;
    background-color: #beeb9f;
    top: 83px;
}

.less-line-height {
    line-height: 104px;
    background-color: #ffff9d;
    top: 106px;
}