JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<h1>
  <span class="chapter">
    Opportunity
  </span>
  <span class="chevron">
    &gt;
  </span>
  <span class="section">
    Problem &amp; Solution
  </span>
  <span class="chevron">
    &gt;
  </span>
  <span class="topic">
    Problem Worth Solving
  </span>
</h1>

CSS

body {
  background: white;
}

h1 {
  font-size: 18px;
  font-family: 'Open sans', sans-serif;
  font-weight: normal;
  height: 28px;
  white-space: nowrap;
}

h1 .chapter, h1 .section, h1 .topic, h1 .chevron {
  display: inline-block;
  white-space: nowrap;
}

h1 .chevron {
  opacity: 0;
  width: 0px;
  transition: width 1s, opacity 0.4s;
}

h1 .chapter, h1 .section {
  opacity: 0;
  max-width: 0px;
  transition: max-width 1s, opacity 0.6s;

}

h1.expanded .chevron {
  opacity: 1;
  width: 14px;
  transition: width 0.3s, opacity 0.6s;

}

h1.expanded .chapter, h1.expanded .section {
  max-width: 180px;
  opacity: 1;
  transition: max-width 0.3s, opacity 0.3s;
}

JavaScript

var toggle = false;

setInterval(function () {

	document.getElementsByTagName('h1')[0].className = (toggle ? 'expanded' : '');

	toggle = !toggle;
}, 2000);