JSFiddle - React, Tailwind, and code Playground
HTML
<button id="fadeOut">Start Fading</button><br>
<section id="xyz">
<span>0 HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>5 HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>10 HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>15 HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO WORLD</span><span>HELLO EARTH</span><span>FORTY-TWO</span>
<span>HELLO SELFHTML</span><span>HELLO...
CSS
span { margin-right: 1em; }
section { transition: opacity 0.5s; }
section.opaque { opacity: 0; }
JavaScript
var count,
fadeOut=document.getElementById('fadeOut'),
xyz=document.getElementById('xyz');
fadeOut.addEventListener('click', function() {
count = 3;
doFadeOut();
});
function doFadeOut() {
xyz.classList.add("opaque");
setTimeout(doFadeIn, 500);
}
function doFadeIn() {
xyz.classList.remove("opaque");
if (--count > 0) setTimeout(doFadeOut, 500);
}