JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<div id="wrap-menu" onmouseout="textWidthInitial(this)">

  <div class="button-menu">
    <div class="link-menu" onmouseover="textWidth(this)">
      Playground
    </div>
    <div class="underline ulPlayground"></div>
  </div>

  <div class="button-menu">
    <div class="link-menu" onmouseover="textWidth(this)">
      Dynamikaj
    </div>
    <div class="underline ulDynamikaj"></div>
  </div>

  <div class="button-menu">
    <div class="link-menu" onmouseover="textWidth(this)">
      Sérigraphie
    </div>
    <div class="underline ulSerigraphie"></div>
  </div>
</div>

  <div class="button-menu">
    <div class="link-menu" onmouseover="textWidth(this)">
      Plan ÉSAD Valence
    </div>
    <div class="underline ulPlanEsad"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.button-menu {
  padding: 25px 0 0 40px;
}
.link-menu {
  font-family: Maison Neue, sans-serif;
  position: absolute;
  height: auto;
  white-space: nowrap;
  z-index: 40;
}

.underline {
  width: 0;
  height: 20px;
  position: relative;
  opacity: 0.5;
  transition: 0.5s ease;
  z-index: 30;
}
.underline.ulPlayground {
  background: green;
}
.underline.ulDynamikaj {
  background: grey;
}
.underline.ulSerigraphie {
  background: blue;
}

.underline.ulPlanEsad {
  background: red;
}

JavaScript

function textWidth(el) {
  
  var underlineDiv = document.getElementsByClassName("underline");
  
 
    for (i = 0; i < underlineDiv.length; i++) {
        var txtWidth = (underlineDiv[i].clientWidth + 1);
        underlineDiv[i].style.width = '0px';
    }
    

    var i;
    for (i = 0; i < el.innerHTML.length; i++) {
        el.nextSibling.nextElementSibling.style.width = el.clientWidth + 'px';
    
    }
    
    el.className+= ' active'; 
    
}