JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rahmen">

    <div id="navi">
        <div id="neu">Neu</div>
        <p id="counter"></p>
    </div>
        
    <div class="element"></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;}
#neu{background:#333;float:left;margin:5px;padding:5px;border-radius:5px;color:#fff;width:75px;text-align:center;}

JavaScript

c=document.getElementById("counter");
e=document.getElementsByClassName("element");
c.innerHTML=e.length+" Elemente";
r=document.getElementById("rahmen")

n=document.getElementById("neu");
n.addEventListener("click",neu,false)
function neu()
{if(e.length>=7){}
else{box=document.createElement("div");
box.className="element";
r.appendChild(box);
c.innerHTML=e.length+" Elemente";}
}