JSFiddle - React, Tailwind, and code Playground

HTML

<div class="eo-calculator-wrap">
<div class="eo-calculator">

<h2>Recruitment Cost Saving Calculator</h2>

<p class="eo-subtext">
Compare traditional agency recruitment fees with Equals One fixed-fee packages and see how much you could save.
</p>

<div class="eo-form-grid">

<div class="eo-field">
<label for="salary">Salary (£)</label>
<input type="number" id="salary" placeholder="Enter salary">
</div>

<div class="eo-field">
<label for="agencyFeePercent">Traditional agency fee (%)</label>
<input type="number" id="agencyFeePercent" value="15">
</div>

<div class="eo-field">
<label for="equalsOnePackage">Select Equals One package</label>
<select id="equalsOnePackage">
<option value="299">£299 – Non-screened</option>
<option value="399">£399 – Screened</option>
<option value="499">£499 – Screened plus interviews</option>
</select>
</div>

</div>

<div class="eo-button-row">
<button type="button" class="eo-button" id="calcBtn">Calculate Savings</button>
<button type="button" class="eo-button eo-secondary-button" id="resetBtn">Reset</button>
</div>

<div class="eo-results" id="resultsBox">

<h3>Results</h3>

<div class="eo-result-row">
<span class="eo-result-label">Traditional Agency Fee</span>
<span class="eo-result-value" id="traditionalFee">£0</span>
</div>

<div class="eo-result-row">
<span class="eo-result-label">Equals One Fee</span>
<span class="eo-result-value" id="equalsOneFee">£0</span>
</div>

<div class="eo-save-box">
<span class="eo-save-title">Potential Saving</span>
<span class="eo-save-value" id="saving">£0</span>
</div>

<div class="eo-cta">
<a href="https://www.equalsone.co.uk/contact/" target="_blank">
Start your recruitment campaign
</a>
</div>

</div>

</div>
</div>

CSS

.eo-calculator-wrap {
  max-width: 760px;
  margin: 30px auto;
  padding: 20px;
}

.eo-calculator {
  background: linear-gradient(180deg,#f7f9fb 0%,#eef3f8 100%);
  border: 2px solid #e11d8a;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(32,52,74,0.08);
  font-family: Arial, sans-serif;
  color: #24384d;
}

.eo-calculator h2 {
  margin: 0 0 10px;
  font-size: 36px;
  line-height: 1.1;
  color: #3f5f83;
}

.eo-subtext {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.5;
  color: #4f6479;
}

.eo-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.eo-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #2f4c6c;
}

.eo-field input,
.eo-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  font-size: 16px;
  border: 1px solid #cdd8e3;
  border-radius: 10px;
  background: #ffffff;
  color: #24384d;
}

.eo-field input:focus,
.eo-field select:focus {
  outline: none;
  border-color: #e11d8a;
  box-shadow: 0 0 0 3px rgba(225,29,138,0.12);
}

.eo-button-row {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.eo-button {
  background: #3f5f83;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.eo-button:hover {
  background: #2f4c6c;
}

.eo-secondary-button {
  background: #ffffff;
  color: #3f5f83;
  border: 1px solid #cdd8e3;
}

.eo-secondary-button:hover {
  background: #f3f6fa;
}

.eo-results {
  margin-top: 26px;
  background: #ffffff;
  border: 2px solid #e11d8a;
  border-radius: 16px;
  padding: 22px;
  display: none;
}

.eo-results h3 {
  margin: 0 0 18px;
  font-size: 28px;
  color: #3f5f83;
}

.eo-result-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px...

JavaScript

function formatCurrency(amount) {
  return "£" + amount.toLocaleString("en-GB", {
    minimumFractionDigits: 0,
    maximumFractionDigits: 0
  });
}

document.getElementById("calcBtn").addEventListener("click", function () {
  var salary = parseFloat(document.getElementById("salary").value);
  var agencyFeePercent = parseFloat(document.getElementById("agencyFeePercent").value);
  var equalsOneFee = parseFloat(document.getElementById("equalsOnePackage").value);

  if (isNaN(salary) || isNaN(agencyFeePercent) || isNaN(equalsOneFee)) {
    alert("Please complete all fields before calculating.");
    return;
  }

  var traditionalFee = salary * (agencyFeePercent / 100);
  var saving = traditionalFee - equalsOneFee;

  document.getElementById("traditionalFee").textContent = formatCurrency(Math.round(traditionalFee));
  document.getElementById("equalsOneFee").textContent = formatCurrency(Math.round(equalsOneFee));
  document.getElementById("saving").textContent = formatCurrency(Math.round(saving));
  document.getElementById("resultsBox").style.display = "block";
});

document.getElementById("resetBtn").addEventListener("click", function () {
  document.getElementById("salary").value = "";
  document.getElementById("agencyFeePercent").value = "";
  document.getElementById("equalsOnePackage").selectedIndex = 0;
  document.getElementById("traditionalFee").textContent = "£0";
  document.getElementById("equalsOneFee").textContent = "£0";
  document.getElementById("saving").textContent = "£0";
  document.getElementById("resultsBox").style.display = "none";
});