JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="container">
  <div class="prev">
    <span class="back"></span>
    <span class="text">Previous</span>
  </div>
  <div class="content">
    The validate function is called a first time when we click on the next button. By default, validate ignore the hidden fields, so when we click on next we validate only the first part on the form (So it's unuseful to create two forms). After the first step, the submit button will call again the validate function to validate the second part ignoring the first part. We can only call validate function once per form, so we validate all the form thanks to ignore hidden fields feature
  </div>
</div>

CSS

.container {
  max-width: calc(100vw - 100px);
  outline: grey solid 1px;
  margin: 0 auto;
  padding: 40px 20px 10px;
}

.content {
  outline: orange solid 1px;
  padding: 10px;
}

.back {
  height: 20px;
  width: 9px;
  overflow: hidden;
  display: inline-block;
}

.back:before {
  content: "\2911";
  color: grey;
  position: absolute;
  font-size: 40px;
  top: -15px;
  left: 2px;
  transform: rotate(180deg);
}

.prev {
  cursor: pointer;
}

.prev span {
  display: inline-block;
  position: relative;
}
.prev .text {
  top: -8px;
  left: -1px;
}