JSFiddle - React, Tailwind, and code Playground

HTML

<form id="regForm">
  
  <!-- One "tab" for each step in the form: -->
  <div class="tabM">
     <h3>Titre 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cons.</p><br>
  </div>
  
  <div class="tabM">
     <h3>Title 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cons.</p><br>
  </div>
  
  <div class="tabM">
     <h3>Title 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cons.</p><br>
  </div>
  
  <div style="overflow:auto;display: inline;">
    <div style="float:right;">
      <button class="buttonM" type="button" id="prevBtn" onclick="nextPrev(-1)">Retour</button>
      <button class="buttonM" type="button" id="nextBtn" onclick="nextPrev(1)" style="background-color: #0d8bf1;color: #ffffff;border: none;padding: 10px 20px;font-size: 17px;font-family: Raleway;cursor: pointer;">Suivant</button>
      <p id="demo"></p>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align: left;margin-top: 10px;">
    <span class="stepM"></span>
    <span class="stepM"></span>
    <span class="stepM"></span>
  </div>
</form>

CSS

#regForm {
    background-color: #1d2327;
    color: white;
    margin: 35px auto;
    font-family: Raleway;
    padding: 25px;
    width: 25%;
    min-width: 335px;
    position: fixed;
    top: 35%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9999;
}

/* Hide all steps by default: */
.tabM {
  display: none;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
    background-color: transparent;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 17px;
    font-family: Raleway;
    cursor: pointer;
}

/* Make circles that indicate the steps of the form: */
.stepM {
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: #239cff;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.3;
}

.stepM.active {
  opacity: 1;
  
  
}

/* Mark the steps that are finished and valid: */
.stepM.finish {
  background-color: #04AA6D;
}

JavaScript

if (localStorage.getItem('step') !== null) { 
    var currentTab = +localStorage.getItem("step");
   }
   else {
   var currentTab = 0;}

 // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x = document.getElementsByClassName("tabM");
  x[n].style.display = "block";
  //... and fix the Previous/Next buttons:
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").innerHTML = "Let's go";
  } else {
    document.getElementById("nextBtn").innerHTML = "Suivant";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tabM");
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  window.localStorage.setItem('step', currentTab);
  document.getElementById("demo").innerHTML = localStorage.getItem("step");
  

  // if you have reached the end of the form...
  if (currentTab >= x.length) {
    // ... the form gets submitted:
    document.getElementById("regForm").style.display = "none";
    return false;   
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x = document.getElementsByClassName("stepM");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className += " active";
}