JSFiddle - React, Tailwind, and code Playground

by awoniyideji

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="aa.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="aa.js" defer></script>
  <title>Loan Agreement</title>
</head>

<body>
  <form action="#" class="form">
    <h1 class="text-center">Client Registration List</h1>
    <!-- Progress bar -->
    <div class="progressbar">
      <div class="progress" id="progress"></div>

      <div class="progress-step progress-step-active" data-title="Client Info"></div>
      <div class="progress-step" data-title="Shareholder Info"></div>
      <div class="progress-step" data-title="Loan Info"></div>
      <div class="progress-step" data-title="Background"></div>
      <div class="progress-step" data-title="Defs"></div>
    </div>

    <!-- Steps -->
    <div class="form-step form-step-active">
      <div class="checkbox">
        <label for="legalEntity">Legal Entity</label>
        <input type="radio" name="choice" id="legalEntity" value="legalEntity" onclick="filterForm()" checked />
        <label for="Individual">Individual</label>
        <input type="radio" name="choice" id="Individual" value="Individual" onclick="filterForm()" />
      </div>
      <div id="lec" class="legal-entity-content">
        <div class="input-group">
          <label for="CompanyName">Company Name</label>
          <input type="text" name="CompanyName" id="CompanyName" placeholder="Ex. My Pocket Counsel" />
        </div>
        <div class="input-group">
          <label for="RegisteredAddress">Registered Address</label>
          <input type="text" name="RegisteredAddress" id="RegisteredAddress" placeholder="Ex. MyPocketCounsel" />
        </div>
        <div class="input-group">
          <label for="RegistrationNumber">Registration Number</label>
      ...

CSS

:root {
    --primary-color: rgb(11, 78, 179);
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    font-family: Montserrat, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    display: grid;
    place-items: center;
    min-height: 100vh;
  }
  /* Global Stylings */
  label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
  }
  
  .width-50 {
    width: 50%;
  }
  
  .ml-auto {
    margin-left: auto;
  }
  
  .text-center {
    text-align: center;
  }
  
  /* Progressbar */
  .progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: 2rem 0 4rem;
  }
  
  .progressbar::before,
  .progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #dcdcdc;
    z-index: -1;
  }
  
  .progress {
    background-color: var(--primary-color);
    width: 0%;
    transition: 1s;
  }
  
  .progress-step {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  } 
  
  .progress-step::before {
    counter-increment: step;
    content: counter(step);
  }
  
  .progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.5rem);
    display: flex;
    justify-content:center;
    align-items: center;
    padding:0 200px 0px 200px ;
    font-size: 0.85rem;
    color: #666;
  }
  
  .progress-step-active {
    background-color: var(--primary-color);
    color: #f3f3f3;
  }
  
  /* Form */
  .form {
    width: clamp(450px, 30%, 430px);
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    padding: 1.5rem;
  }
  
  .form-step {
    display:none;
   ...

JavaScript

const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum++;
    updateFormSteps();
    updateProgressbar();
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum + 1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}

const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");



function filterForm() {
 
  if(document.getElementById('legalEntity').checked) {
    //hide individual contnet
const IndividualContent = document.getElementById("ic");
IndividualContent.classList.add("hide");
const legalEntityContent = document.getElementById("lec");
legalEntityContent.classList.remove("hide");
  }else  {
    const legalEntityContent = document.getElementById("lec");
    legalEntityContent.classList.add("hide");
    const IndividualContent = document.getElementById("ic");
IndividualContent.classList.remove("hide");
  }
}
function filterFormX() {
 
 ...