JSFiddle - React, Tailwind, and code Playground

HTML

<body>    
        <nav id="navLevel1">
            <ul>
                <li id="navLevel1Home"><a href="">Home</a></li>
                <li id="navLevel1About"><a href="about">About</a></li>
                <li id="navLevel1Nogeentest"><a href="nogeentest">Nog een test</a></li>
                <li id="navLevel1Ennogeentest"><a href="ennogeentest">En nog een test</a></li>
            </ul>
        </nav>
        <div id="document">
            <section id="contentSecondary">
                <fieldset id="searchFieldset">
                    <form id="searchForm" method="POST">
                        <label for="searchField"></label>
                        <input id="searchField" type="search" />
                    </form>
                </fieldset>
                <nav id="navLevel2">
                    <ul>
                        <li id="navLevel2Sub1"><a href="#sub1">Sub 1</a></li>
                        <li id="navLevel2Sub2"><a href="#sub2">Sub 2</a></li>
                        <li id="navLevel2Sub3"><a href="#sub3">Sub 3</a></li>
                        <li id="navLevel2Sub4"><a href="#sub4">Sub 4</a></li>
                    </ul>
                </nav>
            </section>
            <section id="contentMain">
                <header>
                    <h1>Lorem Ipsum</h1>
                </header>                
                <section class="showcase"><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</q></section>
                <section class="showcase"><q>Morbi tempor scelerisque sem, id malesuada tortor accumsan a.</q></section>
                <article>
                    <h2 id="sub1">Sub 1</h2>
                    <img id="articleImage scalableSub1" class="articleImage scalable" src="http://placehold.it/100x100" alt="article image" />
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet lacus tellus, vitae feugiat urna. Class aptent taciti sociosqu ad litora torquent per conubia...

CSS

/*    main.less
    by Sven van de Scheur
    based on Less Framework 4    <http://lessframework.com/>
    and Frameless                <http://framelessgrid.com/>
    License:                     <http://opensource.org/licenses/mit-license.php>
    ----------------------------------------------------------------------------
*/
/*    Less Framework 4
    http://lessframework.com
    by Joni Korpi
    License: http://opensource.org/licenses/mit-license.php    */
/*    Frameless            <http://framelessgrid.com/>
    by Joni Korpi         <http://jonikorpi.com/>
    licensed under CC0    <http://creativecommons.org/publicdomain/zero/1.0/>
    -----------------------------------------------------------------------    */
/*    Initital styles
    ---------------    */
/*    Configuration for columns
    -------------------------    */
/*    Resets
    ------    */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
hr,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figure,
figcaption,
hgroup,
menu,
footer,
header,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
article,
aside,
canvas,
figure,
figure img,
figcaption,
hgroup,
footer,
header,
nav,
section,
audio,
video {
  display: block;
}
a img {
  border: 0;
}
/*    Typography presets
    ------------------    */
.gigantic {
  font-size: 110px;
  line-height: 120px;
  letter-spacing: -2px;
}
.huge, h1 {
  font-size: 68px;
  line-height: 72px;
  letter-spacing: -1px;
}
.large, h2 {
  font-size: 42px;
  line-height: 48px;
}
.bigger, h3 {
  font-size: 26px;
  line-height: 36px;
}
.big, h4 {
  font-size: 22px;
  line-height: 30px;
}
body {
  font: 16px/24px Georgia, serif;
}
.small, small {
  font-size: 13px;
  line-height: 18px;
}
/* Selection colours...

JavaScript

$(document).ready(function() {
        snapBarrier = 0.6;
        margin = 20;
    
    
        $(".scalable").bind("mousedown", function(e) {
            
            e.preventDefault();
            
            mouseStartX = e.pageX;
            if ( typeof $(this).attr("data-initialWidth") == "undefined" || $(this).attr("data-initialWidth") == "") {
                
                $(this).attr("data-initialWidth", $(this).width()).attr("data-minimalWidth", $(this).width()).attr("data-zoom", "normal");
            
            }
            
        });
        
        $(".scalable").bind("mousemove", function(e) {
            
            if ( typeof mouseStartX !== "undefined" && mouseStartX) {
                    
                imageGrow = mouseStartX - e.pageX;
                resultWidth = parseInt($(this).attr("data-initialWidth")) + imageGrow;
                
                if(resultWidth >= $(this).attr("data-minimalWidth") && resultWidth <= $(this).parent().innerWidth()) {
                    
                    $(this).css({width: resultWidth});
                    
                }
                
            };
            
        });
        
        $(".scalable").bind("mouseup", function(e) {
                        
            if($(this).width() >= $(this).parent().innerWidth() * snapBarrier) {
                
                $(this).animate({
                    
                    width: $(this).parent().innerWidth() - margin
                    
                }, "fast")
                
                .attr("data-initialWidth", $(this).width())
                .attr("data-zoom", "full");
                
            } else {
            
                $(this).animate({
                    
                    width: $(this).attr("data-minimalWidth")
                    
                }, "fast")
                
                .attr("data-initialWidth", $(this).width())
                .attr("data-zoom", "normal");
      ...