Pricing table

<div class="pricing">

  <div class="billing">
    <span id="lab-m">Monthly</span>
    <button class="switch" id="cycle" role="switch" aria-checked="false"
            aria-labelledby="lab-m lab-y"><span class="knob"></span></button>
    <span id="lab-y">Yearly <em>save 20%</em></span>
  </div>

  <div class="tiers">

    <article class="tier">
      <h3>Starter</h3>
      <p class="blurb">For one person testing an idea.</p>
      <p class="cost"><span class="amt" data-m="0" data-y="0">£0</span><span class="per">/month</span></p>
      <a class="pick ghost" href="#">Start free</a>
      <ul>
        <li>1 project</li>
        <li>10,000 requests a month</li>
        <li>Community support</li>
      </ul>
    </article>

    <article class="tier best">
      <span class="flag">Most popular</span>
      <h3>Studio</h3>
      <p class="blurb">For a small team shipping regularly.</p>
      <p class="cost"><span class="amt" data-m="24" data-y="19">£24</span><span class="per">/month</span></p>
      <a class="pick" href="#">Choose Studio</a>
      <ul>
        <li>10 projects</li>
        <li>500,000 requests a month</li>
        <li>Email support, same working day</li>
        <li>Custom domains</li>
      </ul>
    </article>

    <article class="tier">
      <h3>Agency</h3>
      <p class="blurb">For client work and larger volumes.</p>
      <p class="cost"><span class="amt" data-m="79" data-y="63">£79</span><span class="per">/month</span></p>
      <a class="pick ghost" href="#">Choose Agency</a>
      <ul>
        <li>Unlimited projects</li>
        <li>5,000,000 requests a month</li>
        <li>Priority support</li>
        <li>Custom domains and SSO</li>
        <li>Invoiced billing</li>
      </ul>
    </article>

  </div>
</div>

* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 28px 20px; }

.pricing { max-width: 1000px; margin: 0 auto; }

/* ---- billing toggle ---- */
.billing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: .92rem;
  color: #5b6b83;
}

.billing em { font-style: normal; color: #1f8a5b; font-weight: 600; }

.switch {
  width: 46px;
  height: 26px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #c9d3e2;
  cursor: pointer;
  transition: background .18s ease;
}

.switch[aria-checked="true"] { background: #3b4fe4; }

.knob {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}

.switch[aria-checked="true"] .knob { transform: translateX(20px); }

/* ---- tiers ---- */
.tiers {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  align-items: start;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  background: #fff;
  border: 1px solid #e2e7ef;
  border-radius: 14px;
}

.tier.best {
  border-color: #3b4fe4;
  box-shadow: 0 2px 4px rgba(59,79,228,.06), 0 18px 40px -24px rgba(59,79,228,.5);
}

.flag {
  position: absolute;
  top: -11px;
  left: 24px;
  background: #3b4fe4;
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
}

.tier h3 { font-size: 1.05rem; color: #16202e; }
.blurb { margin-top: 4px; font-size: .87rem; color: #8593ab; }

.cost { margin-top: 18px; display: flex; align-items: baseline; gap: 4px; }
.amt { font-size: 2.2rem; font-weight: 700; color: #16202e; letter-spacing: -0.02em; }
.per { font-size: .86rem; color: #8593ab; }

.pick {
  margin-top: 18px;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding: 11px;
  border-radius: 9px;
  background: #3b4fe4;
  color: #fff;
}

.pick:hover { background: #2a3abf; }
.pick.ghost { background: #fff; color: #16202e; border: 1px solid #e2e7ef; }
.pick.ghost:hover { background: #f2f5f9; }

.tier ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }

.tier li {
  position: relative;
  padding-left: 24px;
  font-size: .89rem;
  color: #5b6b83;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 14px;
  height: 8px;
  border-left: 2px solid #1f8a5b;
  border-bottom: 2px solid #1f8a5b;
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .switch, .knob { transition: none; }
}

const cycle = document.getElementById("cycle");
const amounts = [...document.querySelectorAll(".amt")];
const periods = [...document.querySelectorAll(".per")];

cycle.addEventListener("click", () => {
  const yearly = cycle.getAttribute("aria-checked") !== "true";
  cycle.setAttribute("aria-checked", yearly ? "true" : "false");

  amounts.forEach((el) => {
    el.textContent = "£" + el.dataset[yearly ? "y" : "m"];
  });

  periods.forEach((el) => {
    el.textContent = yearly ? "/month, billed yearly" : "/month";
  });
});