JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>Receipes</title>
    <link rel="stylesheet" type="text/css" href="styles/x.css"
    media="all" />
    <meta charset="UTF-8">
</head>
<body style="border: none;">
    <ul class="navbar">
        <li class="first"><a href="#quark" type="text/html">Quark</a>
        </li>
        <li class="second"><a href="#meatballs" type="text/html">
        Meatballs</a></li>
        <li class="third last"><a href="#pasta" type="text/html">
        Homemade&nbsp;pasta
        </a></li>
    </ul>

    <h1>Woo! Foods!</h1>
    
    <div class="receipe" id="quark">
        <h2>Quark</h2>
        <h5 class="prep-specs">Time: 5 minutes</h5>
        <h3>Desert, snack, breakfast, picnic. The only dish I can
        make that my grandmother&nbsp;made.</h3>
        <h4 class="ingredients">Ingredients:</h4>
        <ul class="ingredients">
            <li><a href="http://en.wikipedia.org/wiki/Quark_%28cheese%29">
            Quark</a>-type cheese. Kesam for instance. Reminds
            you more of yoghurt than cheese.</li>
            <li>Banana</li>
            <li>Frozen forest berries</li>
        </ul>

        <h4 class=variation>Variation:</h4>
        I prefer at least the base of quark + banana. Other than
        that: a lot. Any sort of fruit and berry (strawberries,
        cherries, ribes, grapes, oranges, apples), honey, rasped
        chocolate.
        <a href="http://en.wikipedia.org/wiki/Rolled_oats">
        Rolled oats</a>    for substance. Suggestions&nbsp;welcome.

        <h4 class="equipment">Equipment:</h4>
        <ul class="equipment">
            <li>Fork <span class="application">(mashing)</span>
            </li>
            <li>Microwave <span class="application">(defrosting)
            </span></li>
            <li>Cup <span class="application">(filling)</span>
            </li>
            <li>Knife <span class="application">(cutting)</span>
            </li>
            <li>Bowl <span...

CSS

html {
    margin: 0;
    height: 100%;
    color: black;
    background-color: #ddd;

    /*Removing scrollbar caused by border*/
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html.home {
    border: 1.2em inset black;
}

.home {
    border: 0;
    font-family: Georgia, serif;
}

p.middle {
    margin: 1em -0.7em;
    position: absolute;
    bottom: 50%;
}

p.btw {
    position: absolute;
    bottom: 1.2em;
    font-size: 0.65em;
    margin: 1em -1em;
}

body {
    margin: 0;
    padding: 0;
    background: #ddd;
    padding: 1em 1em 0 1em;
}

h1 {
    font-weight: 100;
    font-family: sans-serif;
    margin: -0.19em 0;
    padding: 0;
    font-size: 6.25em;
    text-align: center;
}

h1.home {
    padding: 0;
    font-size: 6.25em;
    margin: 0em -0.1em;
    font-weight: 700;
}

h2 {
    margin: 0;
    font-weight: 400;
    font-family: sans-serif;
}

h3 {
    font-size: 0.8em;
    font-weight: 700;
}

h4 {
    font-size: 0.95em;
    margin: 0.8em 0.4em 0.4em 0.4em;
    font-weight: 500;
}

h5 {
    font-weight: 400;
    margin: 0.8em 0;
}

ul, ol {
    margin: 0 2em 0 0.6em;
    padding: 0 0 0 1.6em;
    font-size: 0.9em;
}

ol {
    padding: 0 0 0 1.9em;
}

/*Damn. Issue: when there are more links than height*/
.navbar {
    padding: 0.5em;
    background: #aaa;
    position: fixed;
    left: 74.5%;
    top: 10em;
    list-style-type: none;
    line-height: 1.52em;
    border-radius: 0 0.5em 0.5em 0;
}

div.receipe {
    width: 37.2em;
    margin: 1em auto;
    padding: 10px;
    border: 2px solid Maroon;
    border-radius: 0 0.8em;
    background: #ccc;
    font-family: sans-serif;
}

.prep-specs {
    font-variant: small-caps;
}

span.application {
    font-weight: 100;
}

ul.equipment {
    font-weight: 600;
}