Prices in local currency

Create a pricing section with Tailwind CSS that adapts to the visitor's region. Above the three plan cards, a right-aligned control row with a small globe glyph and a native select listing US Dollar, Euro, British Pound, Japanese Yen, and Indian Rupee. Each of the three cards (Starter, Team, Business) shows a plan name, a large price with a /mo suffix, a per-extra-seat line, a short description, a feature list, and a button; give every element that holds money a data-usd attribute with its dollar amount so nothing is hard-coded twice. Under the grid, a muted footnote about the tax treatment of the selected region. Then add JavaScript holding one record per currency — exchange rate, locale, tax note — that on change converts each data-usd amount, rounds sensibly (whole units for western currencies, nearest hundred for yen and rupee), formats it with Intl.NumberFormat so the symbol and separators match the locale, and swaps the footnote text.

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="mb-10 flex flex-wrap items-end justify-between gap-4">
    <div>
      <h2 class="text-3xl font-semibold text-neutral-900">Pricing that follows you</h2>
      <p class="mt-2 text-neutral-500">Billed in your local currency, wherever your team sits.</p>
    </div>
    <label class="flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-3 py-2 text-sm">
      <span class="text-neutral-400"><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"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.3 2.47 3.45 5.47 3.45 9S14.3 18.53 12 21c-2.3-2.47-3.45-5.47-3.45-9S9.7 5.47 12 3Z"/></svg></span>
      <select id="currency" class="bg-transparent pr-1 font-medium text-neutral-900 outline-none">
        <option value="USD">US Dollar</option>
        <option value="EUR">Euro</option>
        <option value="GBP">British Pound</option>
        <option value="JPY">Japanese Yen</option>
        <option value="INR">Indian Rupee</option>
      </select>
    </label>
  </div>

  <div class="grid gap-6 lg:grid-cols-3">
    <div class="rounded-2xl border border-neutral-200 bg-white p-8">
      <h3 class="font-medium text-neutral-900">Starter</h3>
      <p class="mt-4"><span class="text-4xl font-semibold text-neutral-900" data-usd="12">$12</span><span class="text-neutral-500">/mo</span></p>
      <p class="mt-1 text-xs text-neutral-400"><span data-usd="4">$4</span> per extra seat</p>
      <p class="mt-3 text-sm text-neutral-500">Everything one person needs to ship.</p>
      <button class="mt-6 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-50">Start free</button>
      <ul class="mt-6 space-y-3 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-900"><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></span> 3 projects</li>
        <li class="flex gap-2"><span class="text-neutral-900"><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></span> 7-day history</li>
        <li class="flex gap-2"><span class="text-neutral-900"><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></span> Email support</li>
      </ul>
    </div>

    <div class="relative rounded-2xl bg-neutral-900 p-8 shadow-xl ring-1 ring-neutral-900">
      <span class="absolute right-6 top-6 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white">Most popular</span>
      <h3 class="font-medium text-white">Team</h3>
      <p class="mt-4"><span class="text-4xl font-semibold text-white" data-usd="49">$49</span><span class="text-neutral-400">/mo</span></p>
      <p class="mt-1 text-xs text-neutral-500"><span data-usd="9">$9</span> per extra seat</p>
      <p class="mt-3 text-sm text-neutral-400">For teams that review each other's work.</p>
      <button class="mt-6 w-full rounded-xl bg-white py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-100">Start free trial</button>
      <ul class="mt-6 space-y-3 text-sm text-neutral-300">
        <li class="flex gap-2"><span class="text-white"><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></span> Unlimited projects</li>
        <li class="flex gap-2"><span class="text-white"><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></span> Roles and permissions</li>
        <li class="flex gap-2"><span class="text-white"><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></span> Shared environments</li>
      </ul>
    </div>

    <div class="rounded-2xl border border-neutral-200 bg-white p-8">
      <h3 class="font-medium text-neutral-900">Business</h3>
      <p class="mt-4"><span class="text-4xl font-semibold text-neutral-900" data-usd="129">$129</span><span class="text-neutral-500">/mo</span></p>
      <p class="mt-1 text-xs text-neutral-400"><span data-usd="16">$16</span> per extra seat</p>
      <p class="mt-3 text-sm text-neutral-500">Controls and reporting for larger orgs.</p>
      <button class="mt-6 w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-900 hover:bg-neutral-50">Talk to sales</button>
      <ul class="mt-6 space-y-3 text-sm text-neutral-600">
        <li class="flex gap-2"><span class="text-neutral-900"><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></span> SSO &amp; SCIM</li>
        <li class="flex gap-2"><span class="text-neutral-900"><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></span> Audit log export</li>
        <li class="flex gap-2"><span class="text-neutral-900"><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></span> 99.9% uptime SLA</li>
      </ul>
    </div>
  </div>

  <p id="taxNote" class="mt-8 text-center text-xs text-neutral-400">Prices in US dollars, excluding sales tax.</p>
</section>

// Indicative rates — in production these come from your billing provider.
var CURRENCIES = {
  USD: { rate: 1, locale: "en-US", step: 1, note: "Prices in US dollars, excluding sales tax." },
  EUR: { rate: 0.92, locale: "de-DE", step: 1, note: "Prices in euro, excluding VAT. Reverse charge applies to EU businesses." },
  GBP: { rate: 0.79, locale: "en-GB", step: 1, note: "Prices in pounds sterling, excluding UK VAT." },
  JPY: { rate: 152, locale: "ja-JP", step: 100, note: "Prices in yen, consumption tax included." },
  INR: { rate: 84, locale: "en-IN", step: 100, note: "Prices in rupees, excluding 18% GST." }
};

var select = document.getElementById("currency");
var note = document.getElementById("taxNote");
var amounts = [].slice.call(document.querySelectorAll("[data-usd]"));

function render(code) {
  var c = CURRENCIES[code];
  var format = new Intl.NumberFormat(c.locale, {
    style: "currency",
    currency: code,
    maximumFractionDigits: 0
  });

  amounts.forEach(function (el) {
    var converted = Number(el.getAttribute("data-usd")) * c.rate;
    // Round to the currency's natural increment so nothing reads like 11.04.
    var rounded = Math.max(c.step, Math.round(converted / c.step) * c.step);
    el.textContent = format.format(rounded);
  });

  note.textContent = c.note;
}

select.addEventListener("change", function () { render(select.value); });
render(select.value);