JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rahmen">
    <div id="navi">
        <div id="oben" class="button">Neu oben</div>
        <div id="unten" class="button">Neu unten</div>
        <p id="counter"></p>
    </div>
    <div id="inhalt">    
        <div class="element red"></div>
    </div>
</div>

CSS

body{font-family:century gothic;cursor:default;
-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;
background:#333;margin:0px;}
#rahmen{width:500px;margin:auto;margin-bottom:10px;}
#navi{background:red;border-radius:0px 0px 5px 5px;box-shadow:rgba(0,0,0,0.5) 0px 0px 10px;}
button{float:left;margin:9px;}
#counter
{text-align:right;color:#fff;
margin:0px;padding:10px;}
.element{height:75px;border-radius:5px;
background:grey;margin-top:10px;}
.red{background:#ccc;}
.button{background:#333;float:left;margin:5px 0px 5px 5px;padding:5px;border-radius:5px;color:#fff;width:100px;text-align:center;}

JavaScript

c=document.getElementById("counter");
e=document.getElementsByClassName("element");
c.innerHTML=e.length+" Elemente";
r=document.getElementById("rahmen");
i=document.getElementById("inhalt");
o=document.getElementById("oben");
u=document.getElementById("unten");
o.addEventListener("click",oben,false);
u.addEventListener("click",unten,false);

function oben()
{if(e.length>=7){}
 else{box=document.createElement("div");
box.className="element";
i.insertBefore(box,i.childNodes[0]);
c.innerHTML=e.length+" Elemente";}
}
function unten()
{if(e.length>=7){}
else{box=document.createElement("div");
box.className="element";
i.appendChild(box);
c.innerHTML=e.length+" Elemente";}
}