JSFiddle - React, Tailwind, and code Playground

by Sreemaan_KCKS

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wizard Tour Flow</title>
  </head>
<body>
    <div class="container">
      <div class="overlay"></div>
      <h1 class="title tourflow">
        <span>Wizard Tour Flow</span>
        <div class="tooltip">
        	<p>Title of the Project</p>
            <button class="next" onClick="nextStep()">next</button>
            <button class="skip" onClick="dismiss()">skip</button>
        </div>
      </h1>
      <h2 class="subtitle tourflow">
        <span>Step-by-Step guide and feature introduction</span>
        <div class="tooltip">
        	<p>Sub Heading of the project</p>
            <button class="next" onClick="nextStep()">next</button>
            <button class="skip" onClick="dismiss()">skip</button>
        </div>
      </h2>
      <div class="content tourflow">
          <h3>A wizard is a series of pages that guide a user through a complex task. Allow the user to move through the pages. 
          <h3>Wizard panels can move in a straight line from start to finish, or branch into several different process flows.</h3>
          <h3>Typically In Wizard Flow, each page collects a piece of information; when the user clicks the Finish button.</h3>
          <div class="tooltip">
        	<p>Content of the project</p>
            <button class="skip" onClick="dismiss()">skip</button>
          </div>
      </div>
    </div>
</body>
</html>

CSS

.container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f6f4ff;
  text-align: center;
  color: rgb(79, 50, 103);
}
.overlay{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  display: block;
  z-index: 1;
}
.overlay_inactive{
  display: none;
}
.title{
  padding: 30px;
  width: 300px;
  background: #f6f4ff;
  margin: 0 auto 20px;
  position: relative;
}

.subtitle{
  padding: 30px;
  width: 500px;
  background: #f6f4ff;
  margin: 0 auto 30px;
  position: relative;
}

.content{
  display: flex !important;
  padding: 30px;
  width: 80%;
  background: #f6f4ff;
  margin: 0 auto;
  position: relative;
}
p{
  margin: 0 0 30px 0;
  font-size: 1rem;
}

h3{
  margin: 0 50px;
}
.active{
  border: 1px solid;
  z-index: 2;
  border-radius: 15px;
  display: block;
}
.button{
    width: 100px;
    height: 50px;
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
}
.dismiss{
    width: 100px;
    height: 50px;
    border: 1px solid;
    border-radius: 10px;
    cursor: pointer;
}
.tooltip{
    font-size: 10px;
    border: 1px solid;
    border-radius: 15px;
    color: #33363e;
    font-weight: bold;
    position: absolute;
    bottom: -110px;
    left: 50%;
    display: none;
    transform: translateX(-50%);
    background: white;
    padding: 1rem;
    z-index: 2;
}
.tooltip::after{
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -8px;
    width: 0px;
    height: 0px;
    border-bottom: 8px solid white;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
.tourflow.active .tooltip{
  display: block;
}

JavaScript

let index = 0;
const collection = document.getElementsByClassName("tourflow");
const bg = document.getElementsByClassName("overlay");
nextStep();
function inactive(j){
	collection[j].classList.remove("active");
}
function nextStep(){
Object.keys(collection).forEach( (item,i) => {
        (i===index) ? ( collection[i].classList.add("active")): inactive(i);
    })
    index++;
}
function dismiss(){
	bg[0].classList.add("overlay_inactive");
    Object.keys(collection).forEach((item,i) => inactive(i));
}