JSFiddle - React, Tailwind, and code Playground

by Gaurav Gandhi

HTML

<div id="titleHolder"></div>

CSS

.title{
  font-size:18px;
  cursor:pointer
}

.hidden{
  display:none;
}

JavaScript

const titles = ['StackOverflow', 'StackExchange', 'AskDifferent', 'Ask Ubuntu'];
    const titlesLenght = titles.length;

    const getTitleDomId = (title, index) => `${title}-${index}`;

    const getTitleDom = (title, index) => `<span class="title ${index === 0 ? '' : 'hidden'}" id="${getTitleDomId(title, index)}" onclick="slideNext(${index}, ${index === titlesLenght -1 ? 0 : index+1});">${title}</span>`;

    window.slideNext = (index, nextIndex) => {
      document.getElementById(getTitleDomId(titles[index], index)).style.display = 'none';
            document.getElementById(getTitleDomId(titles[nextIndex], nextIndex)).style.display = 'block';
    };

    for(let i = 0; i < titlesLenght; i++){
      document.getElementById('titleHolder').innerHTML += getTitleDom(titles[i], i);
    }