JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="nav" style="margin:5px;padding:15px;border:1px solid gray">

</div>

<div id="box-container" class="container _a">

</div>




<style id="myStyle"></style>

CSS

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 0px;
  margin: 0px;
  font-size: 13px;
}




.container {
  display: flex;
  border: 5px solid green;
  width: 90%;
  /* max-width: 500px; */
  background: #d5eddc;
  height: 200px;
}
.hnd:hover {
  background:#41416c
  
}
.hnd {
  display: inline-block;
  width: 30px;
  height: 100%;
  background: blue;
  background: #2b2b48;
  color: #fff;
  text-align: center;


  writing-mode: vertical-rl;
  transform: rotate(180deg);
  
  font-weight: bolder;
  font-size: x-large;

}

.box-content {

  position: absolute;
  left: 30px;
  padding-left: 5px;
  top: 0px;
  height: 100%;
  display: block;
  width: 100%;
  background: radial-gradient(black, transparent);
  font-size: xxx-large;
  -webkit-text-stroke: 2px black;
  -webkit-text-fill-color: white;
  text-align:center;

}

.box {
  position: relative;
  background: #81f542;
  width: 30px;
  min-width:30px;
  overflow: hidden;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  transition: width 1.0s, background 1.5s;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid #5a5893;

}

.boxActive {
  color: red;
}








b {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

b:hover {
  background: #cdcdcd;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

div {

  background: #fff;
  margin: 0 auto;


}

JavaScript

var boxContainer = document.getElementById('box-container');
var navEl = document.getElementById('nav');
var myStyle = document.getElementById("myStyle")
var boxCount = 0;
var hndWidth = 30; // see width set in .hnd and .box need to keep in sync

function updateStyles(styleEl) {
  var styleStr = ""
  var width= boxContainer.clientWidth; 
  var diff = boxCount-1 * hndWidth;
  for (var i = 1; i <= boxCount; i++) {
  
  // we generate style the will match for the child 
  // only when the parent has the child class as active.
  // width is calculated based on the container width
  // minus the total number of hnd.
  
    styleStr += `
  .container._a${i} div._a${i} {
  background: #fff;
  /* width:${width-diff}px; */
  width:calc(100% - ${diff}px);
  transition: width background 1.5s;
}

   `
  }
  styleEl.innerHTML = styleStr
}
/**
add a box to container 
add a button to select in nav
*/
function addBox(containerEl, navEl, message) {
  boxCount++
  var boxEl = document.createElement("div")
  var boxIdent = "_a" + boxCount;
  message = message ?? "Hello World"
  // create box 
  boxEl.classList.add(boxIdent)
  boxEl.classList.add("box")
  boxEl.innerHTML = `<span class="hnd" >${boxCount}</span><div class="box-content">${message}</div>`
  boxEl.addEventListener('transitionend', (e) => {
  boxEl.classList.add("boxActive")
  console.log('Transition ended', boxIdent,e);
  });
  
  var hndEl = boxEl.getElementsByClassName("hnd")[0];
   hndEl.style.cursor = "pointer" 
  hndEl.addEventListener('click',function(){
    
    changeActive(containerEl, boxIdent)
  })
  
  containerEl.appendChild(boxEl)
  
  // create nav button 
  var btn = document.createElement("b");
  btn.addEventListener('click', function() {
    changeActive(containerEl, boxIdent)
  })
  btn.innerHTML = boxCount
  navEl.appendChild(btn)
  updateStyles(myStyle)

}

/** set the active class on the container */
function changeActive(el, _id) {

  el.classList.forEach((v) => {
    if (v[0] == "_") { // remove...