Plan slider with feature reveal

Create a pricing block with Tailwind CSS where a range slider chooses the plan. Centre a max-w-xl card. Above the slider, a question reading "How many events do you send a month?" and the current value as a large number with a muted unit. The range input is styled full width with an accent-neutral-900 accent colour, tick labels under it at 10k, 100k, 1M and 10M, and the matched plan shown beneath as a bordered strip with the plan name, its monthly price, and a muted line describing what it includes. Below that, a two-column list of the features unlocked at that tier, where features above the current tier are shown greyed with a muted lock note. Finish with a dark call-to-action button and a small line offering a custom quote above 10M events. Then add JavaScript that maps the slider position to four tiers, formats the event count, swaps the plan strip content and dims features that belong to higher tiers.

<section class="mx-auto max-w-xl px-6 py-16">
  <div class="rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <p class="text-sm font-medium text-neutral-900">How many events do you send a month?</p>
    <div class="mt-3 flex items-baseline gap-2">
      <span id="volumeValue" class="text-4xl font-semibold tracking-tight text-neutral-900">100k</span>
      <span class="text-sm text-neutral-500">events / month</span>
    </div>

    <input id="volumeRange" type="range" min="0" max="3" step="1" value="1"
      class="mt-6 w-full accent-neutral-900" />
    <div class="mt-2 flex justify-between text-[11px] font-medium text-neutral-400">
      <span>10k</span><span>100k</span><span>1M</span><span>10M</span>
    </div>

    <div class="mt-6 flex items-center justify-between rounded-xl border border-neutral-200 bg-neutral-50 px-5 py-4">
      <div>
        <p id="planName" class="text-sm font-semibold text-neutral-900">Growth</p>
        <p id="planNote" class="text-xs text-neutral-500">Includes 100k events, 90-day retention.</p>
      </div>
      <p class="text-right"><span id="planPrice" class="text-2xl font-semibold text-neutral-900">$49</span><span class="text-xs text-neutral-400">/mo</span></p>
    </div>

    <ul class="mt-6 grid gap-2.5 text-sm sm:grid-cols-2">
      <li data-tier="0" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Live event stream</li>
      <li data-tier="0" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> 7 dashboards</li>
      <li data-tier="1" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Custom funnels</li>
      <li data-tier="1" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> 90-day retention</li>
      <li data-tier="2" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Warehouse sync</li>
      <li data-tier="2" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Role-based access</li>
      <li data-tier="3" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Data residency</li>
      <li data-tier="3" class="feature flex items-center gap-2 text-neutral-700"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg> Dedicated support</li>
    </ul>

    <button class="mt-7 w-full rounded-xl bg-neutral-900 py-3 text-sm font-medium text-white transition hover:bg-neutral-800">Start on this plan</button>
    <p class="mt-3 text-center text-xs text-neutral-400">Sending more than 10M events? <a href="#" class="font-medium text-neutral-600 underline underline-offset-4 hover:text-neutral-900">Ask for a quote</a>.</p>
  </div>
</section>

var TIERS = [
  { volume: "10k", name: "Starter", price: "$0", note: "Includes 10k events, 30-day retention." },
  { volume: "100k", name: "Growth", price: "$49", note: "Includes 100k events, 90-day retention." },
  { volume: "1M", name: "Scale", price: "$199", note: "Includes 1M events, 1-year retention." },
  { volume: "10M", name: "Enterprise", price: "$690", note: "Includes 10M events, unlimited retention." },
];

var range = document.getElementById("volumeRange");
var value = document.getElementById("volumeValue");
var name = document.getElementById("planName");
var price = document.getElementById("planPrice");
var note = document.getElementById("planNote");
var features = Array.prototype.slice.call(document.querySelectorAll(".feature"));

function render() {
  var i = Number(range.value);
  var tier = TIERS[i];

  value.textContent = tier.volume;
  name.textContent = tier.name;
  price.textContent = tier.price;
  note.textContent = tier.note;

  features.forEach(function (li) {
    // Features from higher tiers stay visible, just clearly out of reach.
    var locked = Number(li.dataset.tier) > i;
    li.classList.toggle("text-neutral-300", locked);
    li.classList.toggle("text-neutral-700", !locked);
  });
}

range.addEventListener("input", render);
render();