Open demo

CSS code

HTML 
<div><span class="lbl">Form with a benefits panel</span>
<div class="sp">
  <form class="sp-form" action="#" method="post" aria-labelledby="sw-title">
    <div class="sp-brand"><span class="sp-mark"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></span>Shiftwise</div>
    <h2 class="sp-title" id="sw-title">Plan next week's rota</h2>
    <p class="sp-sub">Rota planning for cafés and small restaurants.</p>
    <p class="sp-note"><span class="sp-req" aria-hidden="true">*</span> Required field</p>
    <div class="sp-row">
      <div class="sp-field">
        <label class="sp-label" for="sw-name">Your name <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="sp-input" id="sw-name" name="name" type="text" autocomplete="name" required>
      </div>
      <div class="sp-field">
        <label class="sp-label" for="sw-email">Work email <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="sp-input" id="sw-email" name="email" type="email" autocomplete="email" required>
      </div>
    </div>
    <div class="sp-row">
      <div class="sp-field">
        <label class="sp-label" for="sw-org">Business name <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="sp-input" id="sw-org" name="organization" type="text" autocomplete="organization" required>
      </div>
      <div class="sp-field">
        <label class="sp-label" for="sw-size">Team size</label>
        <select class="sp-input" id="sw-size" name="team-size">
          <option>1 to 5 people</option>
          <option>6 to 15 people</option>
          <option>16 to 40 people</option>
          <option>More than 40</option>
        </select>
      </div>
    </div>
    <div class="sp-field">
      <label class="sp-label" for="sw-pw">Password <span class="sp-req" aria-hidden="true">*</span></label>
      <input class="sp-input" id="sw-pw" name="password" type="password" autocomplete="new-password" minlength="10" required aria-describedby="sw-pw-hint">
      <p class="sp-hint" id="sw-pw-hint">At least 10 characters.</p>
    </div>
    <p class="sp-terms">By signing up you agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
    <button class="sp-btn" type="submit">Start planning for free</button>
    <p class="sp-foot">Already using Shiftwise? <a href="#">Log in</a></p>
  </form>
  <div class="sp-panel">
    <p class="sp-eyebrow">Free plan</p>
    <h3 id="sw-panel-title">Everything you need to plan a week in ten minutes</h3>
    <ul class="sp-list">
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Drag-and-drop rota builder</strong><span>Clash warnings when someone is booked twice.</span></div></li>
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Shift swaps from a phone</strong><span>Staff request a swap, you approve it in one tap.</span></div></li>
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Holiday and sickness in one calendar</strong><span>Absences block shifts before you plan them.</span></div></li>
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Labour cost as you plan</strong><span>See the week's wage bill against your sales target.</span></div></li>
    </ul>
    <p class="sp-plan"><b>Free for teams of up to 5.</b> £3 for each extra person a month, cancel any time.</p>
  </div>
</div>
</div>
<div><span class="lbl">Form with an illustrated panel</span>
<div class="sp sp--amber">
  <div class="sp-scene">
    <span class="sp-hill sp-hill--1" aria-hidden="true"></span><span class="sp-hill sp-hill--2" aria-hidden="true"></span><span class="sp-hill sp-hill--3" aria-hidden="true"></span>
    <div class="sp-scene-text">
      <p>Kestrel Ridge Walking Club</p>
      <h3>40 guided walks a year</h3>
      <p>From gentle river paths to full-day ridge routes, every walk led by a trained volunteer.</p>
    </div>
  </div>
  <form class="sp-form" action="#" method="post" aria-labelledby="kr-title">
    <h2 class="sp-title" id="kr-title">Become a member</h2>
    <p class="sp-sub">Membership runs from April to March.</p>
    <p class="sp-note"><span class="sp-req" aria-hidden="true">*</span> Required field</p>
    <div class="sp-field">
      <label class="sp-label" for="kr-name">Full name <span class="sp-req" aria-hidden="true">*</span></label>
      <input class="sp-input" id="kr-name" name="name" type="text" autocomplete="name" required>
    </div>
    <div class="sp-row">
      <div class="sp-field">
        <label class="sp-label" for="kr-email">Email <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="sp-input" id="kr-email" name="email" type="email" autocomplete="email" required>
      </div>
      <div class="sp-field">
        <label class="sp-label" for="kr-tel">Mobile (optional)</label>
        <input class="sp-input" id="kr-tel" name="tel" type="tel" autocomplete="tel" aria-describedby="kr-tel-hint">
        <p class="sp-hint" id="kr-tel-hint">Only for walk leaders on the day.</p>
      </div>
    </div>
    <div class="sp-field">
      <label class="sp-label" for="kr-type">Membership <span class="sp-req" aria-hidden="true">*</span></label>
      <select class="sp-input" id="kr-type" name="membership" required>
        <option value="">Choose a membership</option>
        <option>Individual — £24 a year</option>
        <option>Joint, two adults at one address — £40 a year</option>
        <option>Under 18 — free with an adult member</option>
      </select>
    </div>
    <label class="sp-check"><input name="calendar" type="checkbox" checked><span>Email me the walks calendar each month</span></label>
    <button class="sp-btn" type="submit">Join the club</button>
    <p class="sp-foot">Already a member? <a href="#">Renew your membership</a></p>
  </form>
</div>
</div>
CSS 
/* Split-screen registration: a form beside a panel, stacked on narrow screens. No JavaScript —
   the browser's own validation checks the required fields, and :user-invalid marks them after a try. */
.sp{--sp-accent:#0f766e;--sp-accent-dark:#115e59;--sp-ring:rgba(15,118,110,.22);--sp-ink:#0f172a;--sp-muted:#475569;--sp-line:#7b8794;--sp-error:#b91c1c;
  display:grid;grid-template-columns:7fr 5fr;background:#fff;border-radius:22px;overflow:hidden;color:var(--sp-ink);font-size:.92rem;line-height:1.45;
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 18px 40px -18px rgba(15,23,42,.25)}
.sp--amber{--sp-accent:#b45309;--sp-accent-dark:#92400e;--sp-ring:rgba(180,83,9,.22);grid-template-columns:5fr 7fr}
.sp-form{padding:40px 44px 36px}
.sp-brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:26px}
.sp-mark{width:30px;height:30px;border-radius:8px;background:var(--sp-accent);color:#fff;display:grid;place-items:center}
.sp-title{font-size:1.6rem;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.sp-sub{color:var(--sp-muted);margin:6px 0 18px}
.sp-note{font-size:.8rem;color:var(--sp-muted);margin-bottom:14px}
.sp-req{color:var(--sp-accent);font-weight:700}
.sp-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.sp-field{margin-bottom:16px;min-width:0}
.sp-label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px}
.sp-input{display:block;width:100%;font:inherit;color:inherit;background:#fff;border:1px solid var(--sp-line);border-radius:10px;padding:10px 12px;
  transition:border-color .15s,box-shadow .15s}
select.sp-input{appearance:none;padding-right:38px;cursor:pointer;background:#fff no-repeat right 12px center/16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sp-input:focus{outline:none;border-color:var(--sp-accent);box-shadow:0 0 0 3px var(--sp-ring)}
.sp-input:user-invalid{border-color:var(--sp-error)}
.sp-hint{font-size:.8rem;color:var(--sp-muted);margin-top:6px}
.sp-check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;margin:2px 0 18px;cursor:pointer}
.sp-check input{appearance:none;flex:none;width:18px;height:18px;margin-top:1px;border:1.5px solid var(--sp-line);border-radius:5px;background:#fff center/12px no-repeat;
  cursor:pointer;transition:background-color .15s,border-color .15s}
.sp-check input:checked{background-color:var(--sp-accent);border-color:var(--sp-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sp-check input:focus-visible{outline:2px solid var(--sp-accent);outline-offset:2px}
.sp-terms{font-size:.78rem;color:var(--sp-muted);margin:2px 0 16px}
.sp a{color:var(--sp-accent);text-decoration:underline;text-underline-offset:2px}
.sp a:hover{color:var(--sp-accent-dark)}
.sp a:focus-visible{outline:2px solid var(--sp-accent);outline-offset:2px;border-radius:3px}
.sp-btn{display:block;width:100%;font:inherit;font-weight:600;color:#fff;background:var(--sp-accent);border:0;border-radius:10px;padding:12px 16px;cursor:pointer;
  transition:background-color .15s}
.sp-btn:hover{background:var(--sp-accent-dark)}
.sp-btn:focus-visible{outline:2px solid var(--sp-accent);outline-offset:3px}
.sp-foot{margin-top:16px;text-align:center;color:var(--sp-muted);font-size:.86rem}
/* benefits panel */
.sp-panel{background:#0b3b3c;color:#e6f4f1;padding:40px 38px;display:flex;flex-direction:column;gap:22px}
.sp-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7ee0cf}
.sp-panel h3{font-size:1.28rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#fff;margin-top:-12px}
.sp-list{list-style:none;display:grid;gap:14px}
.sp-list li{display:flex;gap:12px;align-items:flex-start}
.sp-list svg{flex:none;margin-top:1px;color:#0b3b3c;background:#7ee0cf;border-radius:50%;padding:3px}
.sp-list strong{display:block;color:#fff;font-weight:600}
.sp-list span{font-size:.85rem;color:#b9d8d2}
.sp-plan{margin-top:auto;border:1px solid #2b6463;border-radius:14px;padding:14px 16px;font-size:.86rem;color:#d4ebe6}
.sp-plan b{color:#fff}
/* illustrated panel: sky, sun and three hill layers drawn with gradients and clip-path */
.sp-scene{position:relative;min-height:440px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;
  background:linear-gradient(#fbd9a6 0%,#f6b089 46%,#e58a7c 72%)}
.sp-scene::before{content:"";position:absolute;width:86px;height:86px;border-radius:50%;background:#fff1d0;top:58px;right:58px;box-shadow:0 0 0 18px rgba(255,241,208,.25)}
.sp-hill{position:absolute;left:0;right:0;bottom:0}
.sp-hill--1{height:70%;background:#9a6584;clip-path:polygon(0 38%,18% 14%,34% 30%,55% 0,74% 24%,88% 12%,100% 26%,100% 100%,0 100%)}
.sp-hill--2{height:56%;background:#56456f;clip-path:polygon(0 24%,14% 40%,30% 8%,48% 34%,66% 14%,84% 42%,100% 20%,100% 100%,0 100%)}
.sp-hill--3{height:42%;background:#1f2a44;clip-path:polygon(0 22%,22% 0,42% 26%,60% 10%,80% 30%,100% 6%,100% 100%,0 100%)}
.sp-scene-text{position:relative}
.sp-scene-text p:first-child{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fcd9a8}
.sp-scene-text h3{font-size:1.3rem;font-weight:700;line-height:1.25;margin:6px 0 6px}
.sp-scene-text p:last-child{font-size:.86rem;color:#dfe3ee}
@media (max-width:767px){.sp,.sp--amber{grid-template-columns:1fr}.sp-scene{min-height:340px;padding:26px 22px}.sp-scene::before{top:26px;right:34px}
  .sp-hill--1{height:92%}.sp-hill--2{height:82%}.sp-hill--3{height:72%}}
@media (max-width:575px){.sp-form{padding:28px 20px 26px}.sp-panel{padding:28px 22px}.sp-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sp-input,.sp-check input,.sp-btn{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Form with a benefits panel</span>
<div class="card sp"><div class="row g-0">
  <form class="col-md-7 sp-form" action="#" method="post" aria-labelledby="sw-title">
    <div class="sp-brand"><span class="sp-mark"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></span>Shiftwise</div>
    <h2 class="sp-title" id="sw-title">Plan next week's rota</h2>
    <p class="sp-sub">Rota planning for cafés and small restaurants.</p>
    <p class="sp-note"><span class="sp-req" aria-hidden="true">*</span> Required field</p>
    <div class="row gx-3">
      <div class="col-sm-6 mb-3">
        <label class="form-label" for="sw-name">Your name <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="form-control" id="sw-name" name="name" type="text" autocomplete="name" required>
      </div>
      <div class="col-sm-6 mb-3">
        <label class="form-label" for="sw-email">Work email <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="form-control" id="sw-email" name="email" type="email" autocomplete="email" required>
      </div>
    </div>
    <div class="row gx-3">
      <div class="col-sm-6 mb-3">
        <label class="form-label" for="sw-org">Business name <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="form-control" id="sw-org" name="organization" type="text" autocomplete="organization" required>
      </div>
      <div class="col-sm-6 mb-3">
        <label class="form-label" for="sw-size">Team size</label>
        <select class="form-select" id="sw-size" name="team-size">
          <option>1 to 5 people</option>
          <option>6 to 15 people</option>
          <option>16 to 40 people</option>
          <option>More than 40</option>
        </select>
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label" for="sw-pw">Password <span class="sp-req" aria-hidden="true">*</span></label>
      <input class="form-control" id="sw-pw" name="password" type="password" autocomplete="new-password" minlength="10" required aria-describedby="sw-pw-hint">
      <p class="form-text" id="sw-pw-hint">At least 10 characters.</p>
    </div>
    <p class="sp-terms">By signing up you agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
    <button class="btn btn-primary w-100" type="submit">Start planning for free</button>
    <p class="sp-foot">Already using Shiftwise? <a href="#">Log in</a></p>
  </form>
  <div class="col-md-5 sp-panel">
    <p class="sp-eyebrow">Free plan</p>
    <h3 id="sw-panel-title">Everything you need to plan a week in ten minutes</h3>
    <ul class="list-unstyled sp-list">
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Drag-and-drop rota builder</strong><span>Clash warnings when someone is booked twice.</span></div></li>
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Shift swaps from a phone</strong><span>Staff request a swap, you approve it in one tap.</span></div></li>
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Holiday and sickness in one calendar</strong><span>Absences block shifts before you plan them.</span></div></li>
      <li><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong>Labour cost as you plan</strong><span>See the week's wage bill against your sales target.</span></div></li>
    </ul>
    <p class="sp-plan"><b>Free for teams of up to 5.</b> £3 for each extra person a month, cancel any time.</p>
  </div>
</div></div>
</div>
<div><span class="lbl">Form with an illustrated panel</span>
<div class="card sp sp--amber"><div class="row g-0">
  <div class="col-md-5 sp-scene">
    <span class="sp-hill sp-hill--1" aria-hidden="true"></span><span class="sp-hill sp-hill--2" aria-hidden="true"></span><span class="sp-hill sp-hill--3" aria-hidden="true"></span>
    <div class="sp-scene-text">
      <p>Kestrel Ridge Walking Club</p>
      <h3>40 guided walks a year</h3>
      <p>From gentle river paths to full-day ridge routes, every walk led by a trained volunteer.</p>
    </div>
  </div>
  <form class="col-md-7 sp-form" action="#" method="post" aria-labelledby="kr-title">
    <h2 class="sp-title" id="kr-title">Become a member</h2>
    <p class="sp-sub">Membership runs from April to March.</p>
    <p class="sp-note"><span class="sp-req" aria-hidden="true">*</span> Required field</p>
    <div class="mb-3">
      <label class="form-label" for="kr-name">Full name <span class="sp-req" aria-hidden="true">*</span></label>
      <input class="form-control" id="kr-name" name="name" type="text" autocomplete="name" required>
    </div>
    <div class="row gx-3">
      <div class="col-sm-6 mb-3">
        <label class="form-label" for="kr-email">Email <span class="sp-req" aria-hidden="true">*</span></label>
        <input class="form-control" id="kr-email" name="email" type="email" autocomplete="email" required>
      </div>
      <div class="col-sm-6 mb-3">
        <label class="form-label" for="kr-tel">Mobile (optional)</label>
        <input class="form-control" id="kr-tel" name="tel" type="tel" autocomplete="tel" aria-describedby="kr-tel-hint">
        <p class="form-text" id="kr-tel-hint">Only for walk leaders on the day.</p>
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label" for="kr-type">Membership <span class="sp-req" aria-hidden="true">*</span></label>
      <select class="form-select" id="kr-type" name="membership" required>
        <option value="">Choose a membership</option>
        <option>Individual — £24 a year</option>
        <option>Joint, two adults at one address — £40 a year</option>
        <option>Under 18 — free with an adult member</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" id="kr-cal" name="calendar" type="checkbox" checked>
      <label class="form-check-label" for="kr-cal">Email me the walks calendar each month</label>
    </div>
    <button class="btn btn-primary w-100" type="submit">Join the club</button>
    <p class="sp-foot">Already a member? <a href="#">Renew your membership</a></p>
  </form>
</div></div>
</div>
CSS 
/* Bootstrap .card with a .row.g-0 split, .form-control, .form-select, .form-check and .btn-primary,
   recoloured through Bootstrap's CSS variables. No JavaScript: the browser validates the required fields. */
.sp{--sp-accent:#0f766e;--sp-accent-dark:#115e59;--sp-ring:rgba(15,118,110,.22);--sp-ink:#0f172a;--sp-muted:#475569;--sp-line:#7b8794;--sp-error:#b91c1c;
  --bs-card-border-width:0;--bs-card-border-radius:22px;--bs-border-color:var(--sp-line);--bs-border-radius:10px;--bs-body-color:var(--sp-ink);
  --bs-link-color-rgb:15,118,110;--bs-link-hover-color-rgb:17,94,89;
  overflow:hidden;color:var(--sp-ink);font-size:.92rem;line-height:1.45;box-shadow:0 1px 2px rgba(15,23,42,.06),0 18px 40px -18px rgba(15,23,42,.25)}
.sp--amber{--sp-accent:#b45309;--sp-accent-dark:#92400e;--sp-ring:rgba(180,83,9,.22);--bs-link-color-rgb:180,83,9;--bs-link-hover-color-rgb:146,64,14}
.sp p,.sp h2,.sp h3{margin:0}
.sp .sp-form{padding:40px 44px 36px}
.sp .sp-brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:26px}
.sp .sp-mark{width:30px;height:30px;border-radius:8px;background:var(--sp-accent);color:#fff;display:grid;place-items:center}
.sp .sp-title{font-size:1.6rem;font-weight:750;letter-spacing:-.02em;line-height:1.15}
.sp .sp-sub{color:var(--sp-muted);margin:6px 0 18px}
.sp .sp-note{font-size:.8rem;color:var(--sp-muted);margin-bottom:14px}
.sp .sp-req{color:var(--sp-accent);font-weight:700}
.sp .form-label{display:block;font-size:.84rem;font-weight:600;margin-bottom:6px}
.sp .form-control,.sp .form-select{font-size:inherit;line-height:inherit;color:var(--sp-ink);padding:10px 12px;transition:border-color .15s,box-shadow .15s}
.sp .form-select{padding-right:38px;cursor:pointer;background-position:right 12px center;background-size:16px;
  --bs-form-select-bg-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sp .form-control:focus,.sp .form-select:focus{border-color:var(--sp-accent);box-shadow:0 0 0 3px var(--sp-ring)}
.sp .form-control:user-invalid,.sp .form-select:user-invalid{border-color:var(--sp-error)}
.sp .form-text{font-size:.8rem;color:var(--sp-muted);margin-top:6px}
.sp .form-check{display:flex;gap:10px;align-items:flex-start;padding:0;margin:2px 0 18px;min-height:0;font-size:.86rem}
.sp .form-check-input{flex:none;float:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid var(--sp-line);border-radius:5px;cursor:pointer;
  --bs-form-check-bg-image:none;transition:background-color .15s,border-color .15s}
.sp .form-check-input:checked{background-color:var(--sp-accent);border-color:var(--sp-accent);background-size:12px;
  --bs-form-check-bg-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sp .form-check-input:focus{box-shadow:none}
.sp .form-check-input:focus-visible{outline:2px solid var(--sp-accent);outline-offset:2px}
.sp .form-check-label{cursor:pointer}
.sp .sp-terms{font-size:.78rem;color:var(--sp-muted);margin:2px 0 16px}
.sp a{text-underline-offset:2px}
.sp a:focus-visible{outline:2px solid var(--sp-accent);outline-offset:2px;border-radius:3px}
.sp .btn-primary{--bs-btn-bg:var(--sp-accent);--bs-btn-border-color:var(--sp-accent);--bs-btn-hover-bg:var(--sp-accent-dark);--bs-btn-hover-border-color:var(--sp-accent-dark);
  --bs-btn-active-bg:var(--sp-accent-dark);--bs-btn-active-border-color:var(--sp-accent-dark);--bs-btn-focus-box-shadow:none;
  --bs-btn-font-weight:600;--bs-btn-padding-y:11px;--bs-btn-font-size:.92rem;--bs-btn-border-radius:10px;line-height:1.45}
.sp .btn-primary:focus-visible{outline:2px solid var(--sp-accent);outline-offset:3px}
.sp .sp-foot{margin-top:16px;text-align:center;color:var(--sp-muted);font-size:.86rem}
/* benefits panel */
.sp .sp-panel{background:#0b3b3c;color:#e6f4f1;padding:40px 38px;display:flex;flex-direction:column;gap:22px}
.sp .sp-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7ee0cf}
.sp .sp-panel h3{font-size:1.28rem;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#fff;margin-top:-12px}
.sp .sp-list{display:grid;gap:14px;margin:0}
.sp .sp-list li{display:flex;gap:12px;align-items:flex-start}
.sp .sp-list svg{flex:none;margin-top:1px;color:#0b3b3c;background:#7ee0cf;border-radius:50%;padding:3px}
.sp .sp-list strong{display:block;color:#fff;font-weight:600}
.sp .sp-list span{font-size:.85rem;color:#b9d8d2}
.sp .sp-plan{margin-top:auto;border:1px solid #2b6463;border-radius:14px;padding:14px 16px;font-size:.86rem;color:#d4ebe6}
.sp .sp-plan b{color:#fff}
/* illustrated panel: sky, sun and three hill layers drawn with gradients and clip-path */
.sp .sp-scene{position:relative;min-height:440px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:34px;
  background:linear-gradient(#fbd9a6 0%,#f6b089 46%,#e58a7c 72%)}
.sp .sp-scene::before{content:"";position:absolute;width:86px;height:86px;border-radius:50%;background:#fff1d0;top:58px;right:58px;box-shadow:0 0 0 18px rgba(255,241,208,.25)}
.sp .sp-hill{position:absolute;left:0;right:0;bottom:0}
.sp .sp-hill--1{height:70%;background:#9a6584;clip-path:polygon(0 38%,18% 14%,34% 30%,55% 0,74% 24%,88% 12%,100% 26%,100% 100%,0 100%)}
.sp .sp-hill--2{height:56%;background:#56456f;clip-path:polygon(0 24%,14% 40%,30% 8%,48% 34%,66% 14%,84% 42%,100% 20%,100% 100%,0 100%)}
.sp .sp-hill--3{height:42%;background:#1f2a44;clip-path:polygon(0 22%,22% 0,42% 26%,60% 10%,80% 30%,100% 6%,100% 100%,0 100%)}
.sp .sp-scene-text{position:relative}
.sp .sp-scene-text p:first-child{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fcd9a8}
.sp .sp-scene-text h3{font-size:1.3rem;font-weight:700;line-height:1.25;margin:6px 0}
.sp .sp-scene-text p:last-child{font-size:.86rem;color:#dfe3ee}
.card.sp{display:block} /* plain block flow, so vertical margins match the CSS version */
@media (max-width:767px){.sp .sp-scene{min-height:340px;padding:26px 22px}.sp .sp-scene::before{top:26px;right:34px}
  .sp .sp-hill--1{height:92%}.sp .sp-hill--2{height:82%}.sp .sp-hill--3{height:72%}}
@media (max-width:575px){.sp .sp-form{padding:28px 20px 26px}.sp .sp-panel{padding:28px 22px}}
@media (prefers-reduced-motion:reduce){.sp .form-control,.sp .form-select,.sp .form-check-input,.sp .btn{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#56606b] uppercase">Form with a benefits panel</span>
<div class="grid overflow-hidden rounded-[22px] bg-white text-[.92rem] leading-[1.45] text-sp-ink shadow-[0_1px_2px_rgba(15,23,42,.06),0_18px_40px_-18px_rgba(15,23,42,.25)] max-md:grid-cols-1 [--sp-accent:#0f766e] [--sp-accent-dark:#115e59] [--sp-ring:rgba(15,118,110,.22)] grid-cols-[7fr_5fr]">
  <form class="px-11 pt-10 pb-9 max-sm:px-5 max-sm:pt-7 max-sm:pb-[26px]" action="#" method="post" aria-labelledby="sw-title">
    <div class="mb-[26px] flex items-center gap-2.5 font-bold"><span class="grid size-[30px] place-items-center rounded-lg bg-(--sp-accent) text-white"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></span>Shiftwise</div>
    <h2 class="text-[1.6rem] leading-[1.15] font-[750] tracking-[-.02em]" id="sw-title">Plan next week's rota</h2>
    <p class="mt-1.5 mb-[18px] text-sp-muted">Rota planning for cafés and small restaurants.</p>
    <p class="mb-3.5 text-[.8rem] text-sp-muted"><span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span> Required field</p>
    <div class="grid grid-cols-2 gap-x-4 max-sm:grid-cols-1">
      <div class="mb-4 min-w-0">
        <label class="mb-1.5 block text-[.84rem] font-semibold" for="sw-name">Your name <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
        <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="sw-name" name="name" type="text" autocomplete="name" required>
      </div>
      <div class="mb-4 min-w-0">
        <label class="mb-1.5 block text-[.84rem] font-semibold" for="sw-email">Work email <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
        <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="sw-email" name="email" type="email" autocomplete="email" required>
      </div>
    </div>
    <div class="grid grid-cols-2 gap-x-4 max-sm:grid-cols-1">
      <div class="mb-4 min-w-0">
        <label class="mb-1.5 block text-[.84rem] font-semibold" for="sw-org">Business name <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
        <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="sw-org" name="organization" type="text" autocomplete="organization" required>
      </div>
      <div class="mb-4 min-w-0">
        <label class="mb-1.5 block text-[.84rem] font-semibold" for="sw-size">Team size</label>
        <select class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none cursor-pointer appearance-none bg-[length:16px] bg-[right_12px_center] bg-no-repeat pr-[38px] sp-chevron" id="sw-size" name="team-size">
          <option>1 to 5 people</option>
          <option>6 to 15 people</option>
          <option>16 to 40 people</option>
          <option>More than 40</option>
        </select>
      </div>
    </div>
    <div class="mb-4 min-w-0">
      <label class="mb-1.5 block text-[.84rem] font-semibold" for="sw-pw">Password <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
      <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="sw-pw" name="password" type="password" autocomplete="new-password" minlength="10" required aria-describedby="sw-pw-hint">
      <p class="mt-1.5 text-[.8rem] text-sp-muted" id="sw-pw-hint">At least 10 characters.</p>
    </div>
    <p class="mt-0.5 mb-4 text-[.78rem] text-sp-muted">By signing up you agree to the <a class="text-(--sp-accent) underline underline-offset-2 hover:text-(--sp-accent-dark) focus-visible:rounded-[3px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sp-accent)" href="#">Terms of Service</a> and <a class="text-(--sp-accent) underline underline-offset-2 hover:text-(--sp-accent-dark) focus-visible:rounded-[3px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sp-accent)" href="#">Privacy Policy</a>.</p>
    <button class="block w-full cursor-pointer rounded-[10px] bg-(--sp-accent) px-4 py-3 font-semibold text-white transition-[background-color,border-color,color] duration-150 hover:bg-(--sp-accent-dark) focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-(--sp-accent) motion-reduce:transition-none" type="submit">Start planning for free</button>
    <p class="mt-4 text-center text-[.86rem] text-sp-muted">Already using Shiftwise? <a class="text-(--sp-accent) underline underline-offset-2 hover:text-(--sp-accent-dark) focus-visible:rounded-[3px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sp-accent)" href="#">Log in</a></p>
  </form>
  <div class="flex flex-col gap-[22px] bg-[#0b3b3c] px-[38px] py-10 text-[#e6f4f1] max-sm:px-[22px] max-sm:py-7">
    <p class="text-[.72rem] font-bold tracking-[.12em] text-[#7ee0cf] uppercase">Free plan</p>
    <h3 class="-mt-3 text-[1.28rem] leading-[1.25] font-bold tracking-[-.01em] text-white" id="sw-panel-title">Everything you need to plan a week in ten minutes</h3>
    <ul class="grid gap-3.5">
      <li class="flex items-start gap-3"><svg class="mt-px flex-none rounded-full bg-[#7ee0cf] p-[3px] text-[#0b3b3c]" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong class="block font-semibold text-white">Drag-and-drop rota builder</strong><span class="text-[.85rem] text-[#b9d8d2]">Clash warnings when someone is booked twice.</span></div></li>
      <li class="flex items-start gap-3"><svg class="mt-px flex-none rounded-full bg-[#7ee0cf] p-[3px] text-[#0b3b3c]" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong class="block font-semibold text-white">Shift swaps from a phone</strong><span class="text-[.85rem] text-[#b9d8d2]">Staff request a swap, you approve it in one tap.</span></div></li>
      <li class="flex items-start gap-3"><svg class="mt-px flex-none rounded-full bg-[#7ee0cf] p-[3px] text-[#0b3b3c]" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong class="block font-semibold text-white">Holiday and sickness in one calendar</strong><span class="text-[.85rem] text-[#b9d8d2]">Absences block shifts before you plan them.</span></div></li>
      <li class="flex items-start gap-3"><svg class="mt-px flex-none rounded-full bg-[#7ee0cf] p-[3px] text-[#0b3b3c]" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><div><strong class="block font-semibold text-white">Labour cost as you plan</strong><span class="text-[.85rem] text-[#b9d8d2]">See the week's wage bill against your sales target.</span></div></li>
    </ul>
    <p class="mt-auto rounded-[14px] border border-[#2b6463] px-4 py-3.5 text-[.86rem] text-[#d4ebe6]"><b class="text-white">Free for teams of up to 5.</b> £3 for each extra person a month, cancel any time.</p>
  </div>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#56606b] uppercase">Form with an illustrated panel</span>
<div class="grid overflow-hidden rounded-[22px] bg-white text-[.92rem] leading-[1.45] text-sp-ink shadow-[0_1px_2px_rgba(15,23,42,.06),0_18px_40px_-18px_rgba(15,23,42,.25)] max-md:grid-cols-1 [--sp-accent:#b45309] [--sp-accent-dark:#92400e] [--sp-ring:rgba(180,83,9,.22)] grid-cols-[5fr_7fr]">
  <div class="relative flex min-h-[440px] flex-col justify-end overflow-hidden bg-[linear-gradient(#fbd9a6_0%,#f6b089_46%,#e58a7c_72%)] p-[34px] text-white before:absolute before:top-[58px] before:right-[58px] before:size-[86px] before:rounded-full before:bg-[#fff1d0] before:shadow-[0_0_0_18px_rgba(255,241,208,.25)] before:content-[''] max-md:min-h-[340px] max-md:px-[22px] max-md:py-[26px] max-md:before:top-[26px] max-md:before:right-[34px]">
    <span class="absolute inset-x-0 bottom-0 h-[70%] bg-[#9a6584] [clip-path:polygon(0_38%,18%_14%,34%_30%,55%_0,74%_24%,88%_12%,100%_26%,100%_100%,0_100%)] max-md:h-[92%]" aria-hidden="true"></span><span class="absolute inset-x-0 bottom-0 h-[56%] bg-[#56456f] [clip-path:polygon(0_24%,14%_40%,30%_8%,48%_34%,66%_14%,84%_42%,100%_20%,100%_100%,0_100%)] max-md:h-[82%]" aria-hidden="true"></span><span class="absolute inset-x-0 bottom-0 h-[42%] bg-[#1f2a44] [clip-path:polygon(0_22%,22%_0,42%_26%,60%_10%,80%_30%,100%_6%,100%_100%,0_100%)] max-md:h-[72%]" aria-hidden="true"></span>
    <div class="relative">
      <p class="text-[.72rem] font-bold tracking-[.12em] text-[#fcd9a8] uppercase">Kestrel Ridge Walking Club</p>
      <h3 class="my-1.5 text-[1.3rem] leading-[1.25] font-bold">40 guided walks a year</h3>
      <p class="text-[.86rem] text-[#dfe3ee]">From gentle river paths to full-day ridge routes, every walk led by a trained volunteer.</p>
    </div>
  </div>
  <form class="px-11 pt-10 pb-9 max-sm:px-5 max-sm:pt-7 max-sm:pb-[26px]" action="#" method="post" aria-labelledby="kr-title">
    <h2 class="text-[1.6rem] leading-[1.15] font-[750] tracking-[-.02em]" id="kr-title">Become a member</h2>
    <p class="mt-1.5 mb-[18px] text-sp-muted">Membership runs from April to March.</p>
    <p class="mb-3.5 text-[.8rem] text-sp-muted"><span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span> Required field</p>
    <div class="mb-4 min-w-0">
      <label class="mb-1.5 block text-[.84rem] font-semibold" for="kr-name">Full name <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
      <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="kr-name" name="name" type="text" autocomplete="name" required>
    </div>
    <div class="grid grid-cols-2 gap-x-4 max-sm:grid-cols-1">
      <div class="mb-4 min-w-0">
        <label class="mb-1.5 block text-[.84rem] font-semibold" for="kr-email">Email <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
        <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="kr-email" name="email" type="email" autocomplete="email" required>
      </div>
      <div class="mb-4 min-w-0">
        <label class="mb-1.5 block text-[.84rem] font-semibold" for="kr-tel">Mobile (optional)</label>
        <input class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none" id="kr-tel" name="tel" type="tel" autocomplete="tel" aria-describedby="kr-tel-hint">
        <p class="mt-1.5 text-[.8rem] text-sp-muted" id="kr-tel-hint">Only for walk leaders on the day.</p>
      </div>
    </div>
    <div class="mb-4 min-w-0">
      <label class="mb-1.5 block text-[.84rem] font-semibold" for="kr-type">Membership <span class="font-bold text-(--sp-accent)" aria-hidden="true">*</span></label>
      <select class="block w-full rounded-[10px] border border-sp-line bg-white px-3 py-2.5 transition-[border-color,box-shadow] duration-150 focus:border-(--sp-accent) focus:shadow-[0_0_0_3px_var(--sp-ring)] focus:outline-none user-invalid:border-sp-error motion-reduce:transition-none cursor-pointer appearance-none bg-[length:16px] bg-[right_12px_center] bg-no-repeat pr-[38px] sp-chevron" id="kr-type" name="membership" required>
        <option value="">Choose a membership</option>
        <option>Individual — £24 a year</option>
        <option>Joint, two adults at one address — £40 a year</option>
        <option>Under 18 — free with an adult member</option>
      </select>
    </div>
    <label class="mt-0.5 mb-[18px] flex cursor-pointer items-start gap-2.5 text-[.86rem]"><input class="mt-px size-[18px] flex-none cursor-pointer appearance-none rounded-[5px] border-[1.5px] border-sp-line bg-white bg-[length:12px_12px] bg-center bg-no-repeat transition-[background-color,border-color,color] duration-150 checked:border-(--sp-accent) checked:bg-(--sp-accent) checked:sp-tick focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sp-accent) motion-reduce:transition-none" name="calendar" type="checkbox" checked><span>Email me the walks calendar each month</span></label>
    <button class="block w-full cursor-pointer rounded-[10px] bg-(--sp-accent) px-4 py-3 font-semibold text-white transition-[background-color,border-color,color] duration-150 hover:bg-(--sp-accent-dark) focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-(--sp-accent) motion-reduce:transition-none" type="submit">Join the club</button>
    <p class="mt-4 text-center text-[.86rem] text-sp-muted">Already a member? <a class="text-(--sp-accent) underline underline-offset-2 hover:text-(--sp-accent-dark) focus-visible:rounded-[3px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--sp-accent)" href="#">Renew your membership</a></p>
  </form>
</div>
</div>
CSS 
@theme {
  --color-sp-ink: #0f172a;
  --color-sp-muted: #475569;
  --color-sp-line: #7b8794;
  --color-sp-error: #b91c1c;
}
/* select chevron and checkbox tick */
@utility sp-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23475569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@utility sp-tick {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

About this set

Two full-width registration layouts that put the form next to a panel explaining why people should sign up. Form with a benefits panel is a sign-up for a rota planning service: name, work email, business name, a team size select and a password, beside a dark teal panel that lists four free-plan features with tick icons and closes with a short pricing note. Form with an illustrated panel is a walking club membership form whose left panel is a sunset scene drawn entirely in CSS, a sky gradient, a sun and three hill layers cut with clip-path, with the club name and a one-line pitch set on the darkest hill. The form asks for name, email, an optional mobile number, a required membership type with prices in the select, and a calendar email checkbox. Use the benefits panel for trial sign-ups where the value has to be spelled out, and the illustrated panel when a picture carries the brand. Both stack into one column below 768 pixels, with the illustration shortened on top. There is no JavaScript: required, type and minlength do the checking, and :user-invalid turns a field’s border red only after someone has edited it or tried to submit.

What’s included

  • Seven-to-five column split that stacks on phones
  • Benefits panel with a feature checklist and pricing note
  • Illustrated panel drawn with gradients and clip-path, no image files
  • Styled native select with prices in the options
  • No JavaScript; :user-invalid marks fields after interaction

Accessibility

Every field has a visible label and an autocomplete value, including organization and tel, and required fields carry an asterisk explained in a written key. Hints such as the password length are linked with aria-describedby. The decorative hill shapes are aria-hidden, panel text stays above 4.5:1 on its background, and every control has a visible focus ring. Transitions switch off under prefers-reduced-motion.

Customise it

Set --sp-accent, --sp-accent-dark and --sp-ring on .sp (.sp--amber is the second palette) and change the panel background on .sp-panel. The hill colours and clip-path polygons live on .sp-hill--1 to --3. In Bootstrap the column split is .col-md-7 and .col-md-5 inside a .row.g-0; in Tailwind edit the grid-cols-[7fr_5fr] class and the [--sp-accent:…] properties.