JSFiddle - React, Tailwind, and code Playground

by konglie

HTML

<div id='container'>
  <div id='title'>
    Paket 2
  </div>
</div>

CSS

#container {
  position: relative;
  margin: auto;
  border: solid 3px #080;
  width: 255px;
  font-family: Arial;
}

#container > div {
  text-align: center;
  clear: both;
  margin-bottom: 10px;
}

#title {
  background: #080;
  color: #FFF;
  padding: 15px;
}

.the-dot {
  position: relative;
  border: solid 4px #333;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-right: 2px;
  display: inline-block;
}

JavaScript

/*
visit http://kurungkurawal.com
*/

var container = document.getElementById('container');
var centerLimit = 9;
var i = 1, grow = 2;
var el = function(tag){ return document.createElement(tag); }
while(i > 0){
	var row = el('div');
  for(var j = 0; j < i; j++){
		var dot = el('div');
    dot.innerHTML = '&nbsp;'
  	dot.className = 'the-dot';
    row.appendChild(dot);
  }
  container.appendChild(row);
  
  if(i >= centerLimit){
  	grow = 0 - grow;
  }
  i += grow;
}