JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<p>
    <span class="typo1">test</span>
    <span class="typo2 size2">test</span>
    <span class="typo3 size2">test</span>
    <span class="typo4">test</span>
    <span class="typo5 size2">test</span>
    <span class="typo6">test</span>
    <span class="typo7">test</span>
</p>

CSS

html
{
    font-size: 100.01%;
    line-height: 2em;
}
p
{
    font-size: 4em;
   line-height: 2em;
    border-bottom: 1px dashed grey;
    white-space: nowrap;
}
span
{
    position: relative;
    top: 55px;
}
.size2
{
    font-size: 0.5em;
    line-height: 4em;
}
.typo1
{
    font-family: verdana;
}
.typo2
{
    font-family: georgia;
}
.typo3
{
    font-family: impact;
}
.typo4
{
    font-family: helvetica;
}
.typo5
{
    font-family: trebuchet;
}
.typo6
{
    font-family: times;
}
.typo7
{
    font-family: arial;
}