JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
  <div class="logo">
    <div class="section">
      D<span>evelopment</span>D<span>epartment</span>
    </div>  
    <div class="spacer">:</div>
  </div>
  <div class="menu">
    <div class="section">A<span>rchitecture</span></div>  
    <div class="spacer">|</div>
    <div class="section">D<span>esign</span></div>    
  </div>  
</div>

CSS

.outer {
  cursor: default;
}

.logo, .menu {
  display: inline-block;
}

.section, .spacer {
  font: 32pt/34pt 'Helvetica';
  display: inline-block;
}

.section span {
  display: inline-block;
  max-width: 0px;
  overflow: hidden;
  transition: max-width .5s ease;
}

.section:hover, .section:hover span {
  text-decoration: underline;
}

.section:hover span {
  max-width: 500px;
  transition: max-width .5s ease;
}