JSFiddle - React, Tailwind, and code Playground

by Dmitry Ieremenko

HTML

<div class="cube"></div>

CSS

.cube {
  padding: 1px;
  border: 1px solid #48AAE6;
  display: inline-block;
  margin: 100px;
  position: relative; 
}
.cube__item {
  width: 70px;
  height: 70px;
  background-color: #48AAE6;
  border: 1px solid #fff;
  -webkit-box-sizing: content-box;
  box-sizing: content-box; 
}
.cube__row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative; 
}
.cube__add {
  background-color: #F3A500;
  width: 70px;
  height: 70px;
  border: 1px solid #fff;
  position: absolute;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer; 
}
.cube__add:hover {
  background-color: #F6C052; 
}
.cube__add span {
  margin: auto;
  font-size: 10px; 
}
.cube__add-item {
  right: -72px; 
}
.cube__add-row {
  bottom: -72px; 
}
.cube__remove {
  background-color: #B20000;
  width: 70px;
  height: 70px;
  position: absolute;
  color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border: 1px solid transparent;
  display: none; 
}
.cube__remove:hover {
  background-color: #CA4C49;
  cursor: pointer; 
}
.cube__remove span {
  margin: auto;
  font-size: 10px; 
}
.cube__remove-item {
  top: -71px; 
}
.cube__remove-item.active {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
}
.cube__remove-row {
  left: -71px; 
}
.cube__remove-row.active {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
}

JavaScript

/*class myCube{
		constructor(wrapper){
			this.wrapper = document.querySelector(wrapper);
		}
		createElement(name  , classes , innerHtml = null , parents){
			this.element = document.createElement(name);
			this.classAll = classes;
			this.wrapBlock = document.querySelectorAll(parents);
			if(typeof this.classAll === 'object'){
				for(let i = 0 ; i < this.classAll.length ; i++){
					this.element.classList.add(this.classAll[i]);
				}
			}
			else{
				this.element.classList.add(this.classAll);
			}
			this.element.innerHTML = innerHtml;
			for(let i = 0; i <this.wrapBlock.length; i++){
				this.wrapBlock[i].appendChild(this.element);
			}
			
		}
		createCube(rows , cols){
			this.createElement('div',['cube__remove','cube__remove-row'] ,"<span> <i class=\"fas fa-plus\"></i> </span>" , '.cube' );
			this.createElement('div',['cube__remove', 'cube__remove-item'] ,"<span> <i class=\"fas fa-plus\"></i> </span>" , '.cube' );
			this.createElement('div',['cube__add', 'cube__add-item'] ,"<span> <i class=\"fas fa-plus\"></i> </span>" ,'.cube');
			this.createElement('div',['cube__add', 'cube__add-row'] ,"<span> <i class=\"fas fa-plus\"></i> </span>",'.cube' );
			this.colsNumber = cols;
			this.rowsNumber = rows;
			for(let i = 0 ; i < this.colsNumber ; i++ ){
				this.createElement('div', 'cube__row',null,'.cube');
				for(let j = 0; j < this.rowsNumber ; j++){
					this.createElement('div', 'cube__item',null,'.cube__row');
				}
			}
			this.createAttrInDiv();
		}
		createAttrInDiv(){
			let myItem = document.querySelectorAll('.cube__row');
			myItem.forEach(function(rowItem , i){
				rowItem.setAttribute('data-number', i);
				let childItem = rowItem.childNodes;
				childItem.forEach(function(childList,j){
					childList.setAttribute('data-number',j);
				})
			})
		}
		moveMouse(){
			this.wrapper.addEventListener('mouseover',(e) =>{
				if(e.target.classList.contains('cube__item')){
					e.target.getAttribute('data-number'));
				}
			})
		}


	let cube = new...