JSFiddle - React, Tailwind, and code Playground

by KevinFarrugia

HTML

<body>
    <div id="page">
        <div class="title">
        <h1>
            Bacon ipsum dolor sit</h1></div>
        <div class="entry">
            <h2>
                Flank swine pork belly jerky pork strip steak ham tenderloin sirloin</h2>
            <div class="content">
                <div class="navigationMenu">
                    <ul>
                        <li>
                            Salami
                        </li>
                        <li>
                            Biltong
                        </li>
                        <li>
                            Prosciutto
                        </li>
                        <li>
                            Kielbasa
                        </li>
                    </ul>
                </div>
                <div class="main">
                    <p>
                        Salami biltong tail ham. Ground round tenderloin ball tip, pig prosciutto chuck
                        turkey tail jowl shoulder jerky. Leberkas fatback corned beef jowl. Strip steak
                        leberkas drumstick flank meatloaf spare ribs frankfurter beef pork chop pork loin
                        pork belly prosciutto. Venison beef ribs hamburger turducken drumstick.</p>
                    <p>
                        Boudin brisket venison frankfurter, ham biltong short loin turducken sausage jowl.
                        Frankfurter filet mignon boudin turducken andouille rump bresaola. Meatball prosciutto
                        pancetta brisket ribeye fatback pig ball tip bacon shank doner hamburger beef ribs
                        jerky jowl. Swine andouille turkey bacon drumstick meatball, ribeye t-bone beef
                        doner rump chuck shank frankfurter fatback.</p>
                    <p>
                        Andouille strip steak turducken ham hock beef ribs. Salami filet mignon ribeye,
                        jerky short loin bresaola boudin capicola meatloaf tenderloin...

CSS

*
        {
            margin: 0;
            padding: 0;
        }
        
        /* Foundation styles */
        body
        {
            background: #1E1E1E;
            color: #FFF;
            font: normal 100% Helvetica, Arial, sans-serif;
        }
        
        a
        {
            color: #8FDFFD;
        }
        
        a:hover
        {
            color: #36C;
            text-decoration: none;
        }
        
        p
        {
            margin-bottom: 1em;
        }
        
        ul
        {
            list-style-type: none;
        }
        
        /* Type */
        #page 
        {
            margin: 2.5em auto;
	        padding: 0 1em;
	        max-width: 61.75em;		/* 988px / 16px = 61.75em */
        }

        .title
        {
            width: 82.938%;
        }
                
        .navigationMenu
        {
            width: 12.55%;
            display: inline-block;
            height:100%;
            float: left;
            clear: both;                        
            background: #36A;
            overflow: hidden;
            margin-right: 2.024%;
        }          
        
        .entry .main
        {
            width: 85.425%;
            text-align: justify;
            display: inline-block;            
        }      
        
        h1 {
	        font-size: 3em;			/* 48px / 16px = 3em */
	        line-height: 1.14583;	/* 55px / 48px = 1.14583 */
	        margin: 0 0 1.07em;
	        text-transform: uppercase;
        }

        .entry .info {
	        font-size: 0.6875em;	/* 11px / 16px = 0.6875em */
	        font-weight: bold;
	        line-height: 1.45455;	/* 16px / 11px = 1.45455 */
        }

        .entry h2 {
	        font-size: 1.5em;			/* 24px / 16px = 1.5em */
	        margin-bottom: 0.66667em;	/* 16px / 24px = 0.66667em */
        }

        .entry .info {
	        letter-spacing: 0.08em;
	        text-transform: uppercase;
        }

        .entry .main {
	        font:...