JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="text large">
<h1 class="title">Perfecting Web Font Readibility</h1>
<h2 class="subtitle">Everything you wanted to know and more about Web Type</h2>
<h3><a href="#">James Kyle</a></h3>



<p>Lorem ipsum dolor sit amet, <a href="#">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 href="#">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 Beginning </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 href="#">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,...

SCSS

@mixin color($value) {
    color: ie-hex-str($value);
    color: $value;
}

$x: 7px;

$font-size: 2 * $x;
$line-height: 3 * $x;
$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-weight: 300;



@mixin font {
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: 1em;
    line-height: $line-height/$font-size*1em;
}

@mixin font-render {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
}


html {font-size: $font-size/16px*100%}

body {
    padding: 0;
    margin: 0;
    @include font;
    @include font-render;
    
    color: #010101;
    color: rgba(0,0,0,.99);
    text-shadow: 0 1px 1px 1px rgba(255,255,255,.1);
    
    background-color: #FEFEFE;
    background-color: rgba(254,254,254);
}

.text {
    position: relative;
    min-width: 20em;
    max-width: 40em;
    margin: 0 auto;
    
    &.left    { text-align: left    }
    &.center  { text-align: center  }
    &.right   { text-align: right   }
    &.justify { text-align: justify }

    &.small { padding: $font-size }
    &.large { padding: $font-size * 2 }
}

* > * {
    &:first-child { margin-top:    0 !important}
    &:last-child  { margin-bottom: 0 !important}
}

p {
    margin: $line-height 0;
}

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;
    
    @include color(rgba(255,255,255,.99));
    
    outline: 2px solid #db048d;
    border-bottom-color: #fad4ec;
}



blockquote {
    margin: $line-height 0;
    padding: 0 0 0 $x + ($x - 2px);
    border-left: 2px solid rgba(0,0,0,.25);
    
    font-style: italic;
    font-weight: 600;
    
    @include...