JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Recognition Budget Calculator — Simple</title>
  <style>
    :root{
      --blue:#1e67d0; --blue-600:#1557b2; --blue-050:#f6faff; --ink:#0b2542; --muted:#5c6b7a; --border:#e8f0fb; --bg:#ffffff; --r:12px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--ink)}
    .wrap{max-width:720px;margin:36px auto;padding:0 16px 56px}
    h1{font-size:26px;margin:0 0 6px}
    p.lead{margin:0 0 18px;color:var(--muted)}

    .card{background:#fff;border:1px solid var(--border);border-radius:var(--r);box-shadow:0 6px 18px rgba(24,63,128,.06);padding:16px}
    .group{margin:12px 0}
    label{display:block;font-weight:600;font-size:12px;color:var(--muted);margin-bottom:6px}
    input[type="number"], select{width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--blue-050)}
    fieldset{border:1px solid var(--border);border-radius:10px;padding:10px}
    legend{color:var(--blue-600);font-weight:700;font-size:12px;padding:0 6px}
    .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .actions{margin-top:12px;display:flex;gap:10px}
    button{border:0;background:var(--blue);color:#fff;border-radius:10px;padding:12px 16px;font-weight:700;cursor:pointer}
    button.secondary{background:#fff;color:var(--blue);border:1px solid var(--blue)}
    .note{font-size:12px;color:#7b8aa0;margin-top:8px}
    .badge{display:inline-block;background:var(--blue-050);color:var(--blue-600);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px}
    .warn{color:#b0472e}
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Recognition Budget Calculator</h1>
    <p class="lead">Simple inputs with instant results for...