Skip to content
  • No data uploaded
  • Instant results
UI Component Generator

Tailwind CSS Currency Pricing Table for Vanilla JS

A production-ready minimal currency pricing table: a dynamic pricing section that detects the visitor’s currency, shows purchasing-power-adjusted regional prices and lets users switch between USD, EUR, GBP, INR and JPY. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vanilla JS code update instantly in your browser.

Live component editor

Library
ReactVueHTML
Framework
TailwindBootstrap
Style
MinimalGlass
Theme
Corner radius
Live preview 
<!-- Requires Tailwind CSS v3 (CLI/PostCSS build, or the Play CDN for prototypes) -->
<section class="px-6 py-16">
  <div class="max-w-4xl mx-auto">
    <div class="text-center">
      <span class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-full bg-[#4f46e5]/10 text-[#4f46e5]">Fair regional pricing</span>
      <h2 class="mt-3 text-3xl font-bold text-slate-900">Pricing in your currency</h2>
      <p class="mt-2 text-slate-500">We detected your currency automatically — switch any time.</p>
      <div class="mt-6 flex flex-wrap justify-center gap-2" role="group" aria-label="Currency">
        <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" data-set="currency:USD" data-pressed="currency:USD" aria-pressed="true">USD</button>
        <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" data-set="currency:EUR" data-pressed="currency:EUR" aria-pressed="false">EUR</button>
        <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" data-set="currency:GBP" data-pressed="currency:GBP" aria-pressed="false">GBP</button>
        <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" data-set="currency:INR" data-pressed="currency:INR" aria-pressed="false">INR</button>
        <button type="button" class="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" data-set="currency:JPY" data-pressed="currency:JPY" aria-pressed="false">JPY</button>
      </div>
    </div>
    <div class="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <div class="h-full p-8 flex flex-col bg-white border border-slate-200 shadow-sm rounded-xl">
          <h3 class="text-lg font-semibold text-slate-900">Pro</h3>
          <p class="mt-1 text-sm text-slate-500">For individuals and small teams.</p>
          <p class="mt-6">
            <span data-when="currency:USD"><span class="text-4xl font-bold text-slate-900">$29</span></span>
            <span data-when="currency:EUR" hidden><span class="text-4xl font-bold text-slate-900">€27</span></span>
            <span data-when="currency:GBP" hidden><span class="text-4xl font-bold text-slate-900">£23</span></span>
            <span data-when="currency:INR" hidden><span class="text-4xl font-bold text-slate-900">₹999</span></span>
            <span data-when="currency:JPY" hidden><span class="text-4xl font-bold text-slate-900">¥3,900</span></span>
            <span class="text-sm text-slate-500">/month</span>
          </p>
          <ul class="list-none mt-6 mb-8 flex flex-col gap-2 flex-1">
            <li class="text-sm text-slate-700">✓ Unlimited projects</li>
            <li class="text-sm text-slate-700">✓ Priority email support</li>
            <li class="text-sm text-slate-700">✓ Custom domain</li>
          </ul>
          <a href="#" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full">Choose Pro</a>
        </div>
      </div>
      <div>
        <div class="h-full p-8 flex flex-col bg-white border border-slate-200 shadow-sm rounded-xl ring-2 ring-[#4f46e5]">
          <h3 class="text-lg font-semibold text-slate-900">Team</h3>
          <p class="mt-1 text-sm text-slate-500">For growing companies.</p>
          <p class="mt-6">
            <span data-when="currency:USD"><span class="text-4xl font-bold text-slate-900">$79</span></span>
            <span data-when="currency:EUR" hidden><span class="text-4xl font-bold text-slate-900">€73</span></span>
            <span data-when="currency:GBP" hidden><span class="text-4xl font-bold text-slate-900">£62</span></span>
            <span data-when="currency:INR" hidden><span class="text-4xl font-bold text-slate-900">₹2,999</span></span>
            <span data-when="currency:JPY" hidden><span class="text-4xl font-bold text-slate-900">¥11,000</span></span>
            <span class="text-sm text-slate-500">/month</span>
          </p>
          <ul class="list-none mt-6 mb-8 flex flex-col gap-2 flex-1">
            <li class="text-sm text-slate-700">✓ Everything in Pro</li>
            <li class="text-sm text-slate-700">✓ 10 seats included</li>
            <li class="text-sm text-slate-700">✓ SSO & audit log</li>
          </ul>
          <a href="#" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full">Choose Team</a>
        </div>
      </div>
    </div>
    <p class="mt-6 text-center text-xs text-slate-500">Prices exclude local taxes. You are charged in the currency shown.</p>
  </div>
</section>

<script>
  (() => {
    // Region → currency (extend as needed). Prices below are regional, not FX conversions.
    const EUROZONE = ['AT', 'BE', 'CY', 'DE', 'EE', 'ES', 'FI', 'FR', 'GR', 'HR', 'IE', 'IT', 'LT', 'LU', 'LV', 'MT', 'NL', 'PT', 'SI', 'SK'];
    const REGION_CURRENCY = { US: 'USD', GB: 'GBP', IN: 'INR', JP: 'JPY' };

    function detectCurrency() {
      try {
        // Prefer a country injected by your edge (e.g. Cloudflare CF-IPCountry) if present.
        const region = document.documentElement.dataset.country || new Intl.Locale(navigator.language).maximize().region;
        if (REGION_CURRENCY[region]) return REGION_CURRENCY[region];
        if (EUROZONE.includes(region)) return 'EUR';
      } catch {
        // SSR / very old browsers → fall through to the default
      }
      return 'USD';
    }
    const state = { currency: detectCurrency() };
    const actions = {  };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>

More Tailwind components for Vanilla JS

All components →

Free Tailwind CSS Currency Pricing Table for Vanilla JS by pGento

Install Tailwind CSS for Vanilla JS

Prototype instantly with the Play CDN, or install the Tailwind CLI for production:

<script src="https://cdn.tailwindcss.com"></script>
npm install -D tailwindcss@3
npx tailwindcss init
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Add ./**/*.html to content in tailwind.config.js and put the three @tailwind directives in src/input.css.

Use the currency pricing table in Vanilla JS

Paste the markup where the component should appear. The small inline <script> wires up the interactive state with one delegated click listener — no framework needed.

How currency detection works

The generated detectCurrency() reads the browser locale (navigator.language → Intl.Locale(...).maximize().region) and maps the region to a currency — no network request, no third-party geo-IP service, nothing to slow down rendering.

For IP-based detection, pass the country from your CDN: Cloudflare exposes it as the CF-IPCountry request header (and request.cf.country in Workers). Inject it into the page (for example as <html data-country="IN">) and read it first in detectCurrency(). Always let users override the guess, and charge in the currency you display.

Accessibility & customization

The currency switcher is a labelled group of toggle buttons using aria-pressed; prices are rendered as text for every currency so screen readers and search engines always see a price.

Every color, radius and dark-mode choice is baked into plain utility classes, so the copied code has no runtime dependency on this site.

Compatibility

ItemDetails
CSS frameworkTailwind CSS v3.4+
LibraryPlain HTML + optional vanilla JS
Interactive statecurrency
Dark modeYes — toggle in the editor
StyleMinimal

Frequently asked questions

How do I install this Tailwind currency pricing table in Vanilla JS?
Create a web page, install Tailwind CSS as shown in the installation section, then paste the generated code.
Can I change the color of the currency pricing table?
Yes. Use the brand color picker or type any hex code — the preview and code update instantly, and the color is written directly into the classes you copy.
Does the currency pricing table support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the currency pricing table accessible?
The currency switcher is a labelled group of toggle buttons using aria-pressed; prices are rendered as text for every currency so screen readers and search engines always see a price.
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.
Tailwind CSS Currency Pricing Table for Vanilla JS

Embed this tool on your site

Paste this code into any web page. It stays free, fast and ad-free inside your site.

Print or save as PDF

Prints just this tool and its result. Choose “Save as PDF” as the printer to get a file. Branding is stored only in this browser.