JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>

<div id="octagon-container">
<div class="octagon"></div>
</div>


</body>
</html>

CSS

.octagon { 
    width: 100px; 
    height: 100px; 
    background: green; 
    position: relative; 
    float:left
} 

.octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0;
    border-bottom: 29px solid green; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

.octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid green; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
}

JavaScript

var octCon = document.getElementById("octagon-container");
for(var i = 0; i < 10; i++){
var oct = document.createElement("div");
oct.setAttribute("class","octagon");
oct.setAttribute("className","octagon");
octCon.appendChild(oct);
}