JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<h1>Perfecting Web Font Readibility</h1>
<h2><a href="#">James Kyle</a></h2>

<h3>Everything you wanted to know and more about Web Type</h3>

<p>Lorem ipsum dolor sit amet, <a>consectetur</a> adipiscing elit. Suspendisse auctor nunc sit amet lorem tempor sed rhoncus risus suscipit. Suspendisse sodales scelerisque quam, quis venenatis magna varius eu. Quisque vestibulum mauris non ligula sagittis cursus. Vivamus non laoreet quam. Mauris bibendum suscipit nisi eget venenatis. Aliquam eget leo vitae risus rhoncus elementum eu fringilla augue. Proin eget nisi ac quam lacinia semper id molestie mauris. Aliquam rutrum laoreet fermentum. <a>In hac habitasse platea</a> dictumst. Curabitur enim risus, vulputate id fringilla eu, facilisis at mi. Sed euismod, turpis quis ultrices facilisis, erat nisi aliquet ipsum, a cursus lorem augue eu ipsum. Nunc non ipsum lorem. Donec condimentum nisl sed arcu dignissim lacinia. Suspendisse tempus, risus a semper euismod, enim tellus varius metus, sed rutrum felis lectus ut dolor. Morbi dui risus, congue quis feugiat ac, placerat ac eros. In sapien sapien, fermentum nec pulvinar sed, iaculis eget ligula.</p>

<hr/>

<h2>A new heading</h2>

<h4>Aenean lacinia bibendum nulla sed consectetur</h4>
<h5>Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</h5>

<p>Cras lacinia, risus vitae pulvinar porta, enim tortor egestas ipsum, quis placerat sem felis eget justo. Cras aliquet laoreet mi, in lacinia leo dapibus pharetra. Nullam ipsum nisi, bibendum a pulvinar ac, tincidunt vitae diam. <a>Mauris in sapien</a> id metus egestas mollis tristique non nunc. Mauris et diam dictum sem lobortis porttitor. Vestibulum metus ante, sagittis non iaculis eget, congue in dui. Aliquam id ligula lectus, vitae accumsan felis. Nullam ac hendrerit sem. Duis lorem urna, rhoncus pulvinar rhoncus ut, facilisis ut sapien. Phasellus tempus, lorem non dictum malesuada, dui felis rhoncus nibh, non mollis ligula ante at erat. Donec ornare, neque eget porta...

CSS

html {font-size: 87.5%; background-color: #FEFEFE;}

body {
    min-width: 20em;
    max-width: 40em;
    margin: 0 auto;
    padding: 28px;
    font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 14px;
    line-height: 21px;
    font-weight: 300;
    color: #010101;
    color: rgba(0,0,0,.99);
    text-shadow: 0 1px 1px 1px rgba(255,255,255,.1);
    
    
    background-color: rgba(254,254,254);
    
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
}

p {
    margin: 21px 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 21px 0;
    font-size: 14px;
    line-height: 21px;
    color: rgba(0,0,0,.8);
}

h1 {
    margin-top:   14px;
    font-size:    28px;
    line-height:  35px;
    margin-bottom: 7px;
}

h2 {
    margin-top:    7px;
    font-size:    21px;
    line-height:  28px;
    margin-bottom: 7px;
}

h1 + h2 {
    margin-top: -7px;
    font-size: 17px;
    line-height: 21px;
}

h3 {
    margin-top:    21px;
    font-size:     15px;
    line-height:   21px;
    margin-bottom: 14px;
}

h4 {
    margin-top:    14px;
    font-size:     17px;
    line-height:   21px;
    margin-bottom: 7px;
}

h5 {
    margin-top:    7px;
    font-size:     14px;
    line-height:   21px;
    margin-bottom: 7px;
}

a {
    color: #db048d;
    text-decoration: none;
    border-bottom: 1px solid #fad4ec;
    cursor: pointer;
}
a:hover  { border-bottom-color: #db048d }
a:active { color: #ba0477 }
a:focus,
a:focus:hover {
    background: #db048d;
    color: #FEFEFE;
    color: rgba(255,255,255,.99);
    outline: 2px solid #db048d;
    border-bottom-color: #fad4ec;
}

* > *:first-child {
    margin-top: 0;
}
* > *:last-child {
    margin-bottom: 0;
}

span.textlines {
    display: inline;
    
    background: #808080;
    background:...