- No data uploaded
- Instant results
Tailwind CSS Currency Pricing Table for React — Glassmorphism
A production-ready glassmorphism 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 React code update instantly in your browser.
Live component editor
Live preview
import { useState } from 'react';
// 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';
}
export default function CurrencyPricing() {
const [currency, setCurrency] = useState(() => detectCurrency());
return (
<section className="px-6 py-16">
<div className="max-w-4xl mx-auto">
<div className="text-center">
<span className="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 className="mt-3 text-3xl font-bold text-slate-900">Pricing in your currency</h2>
<p className="mt-2 text-slate-500">We detected your currency automatically — switch any time.</p>
<div className="mt-6 flex flex-wrap justify-center gap-2" role="group" aria-label="Currency">
<button type="button" className="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" onClick={() => setCurrency('USD')} aria-pressed={currency === 'USD'}>USD</button>
<button type="button" className="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" onClick={() => setCurrency('EUR')} aria-pressed={currency === 'EUR'}>EUR</button>
<button type="button" className="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" onClick={() => setCurrency('GBP')} aria-pressed={currency === 'GBP'}>GBP</button>
<button type="button" className="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" onClick={() => setCurrency('INR')} aria-pressed={currency === 'INR'}>INR</button>
<button type="button" className="inline-flex items-center justify-center px-3 py-2 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-700 hover:bg-white/70 aria-pressed:border-[#4f46e5] aria-pressed:text-[#4f46e5] aria-pressed:ring-1 aria-pressed:ring-[#4f46e5]" onClick={() => setCurrency('JPY')} aria-pressed={currency === 'JPY'}>JPY</button>
</div>
</div>
<div className="mt-10 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<div className="h-full p-8 flex flex-col bg-white/60 backdrop-blur-xl border border-white/60 shadow-2xl rounded-xl">
<h3 className="text-lg font-semibold text-slate-900">Pro</h3>
<p className="mt-1 text-sm text-slate-500">For individuals and small teams.</p>
<p className="mt-6">
<span hidden={currency !== 'USD'}><span className="text-4xl font-bold text-slate-900">$29</span></span>
<span hidden={currency !== 'EUR'}><span className="text-4xl font-bold text-slate-900">€27</span></span>
<span hidden={currency !== 'GBP'}><span className="text-4xl font-bold text-slate-900">£23</span></span>
<span hidden={currency !== 'INR'}><span className="text-4xl font-bold text-slate-900">₹999</span></span>
<span hidden={currency !== 'JPY'}><span className="text-4xl font-bold text-slate-900">¥3,900</span></span>
<span className="text-sm text-slate-500">/month</span>
</p>
<ul className="list-none mt-6 mb-8 flex flex-col gap-2 flex-1">
<li className="text-sm text-slate-700">✓ Unlimited projects</li>
<li className="text-sm text-slate-700">✓ Priority email support</li>
<li className="text-sm text-slate-700">✓ Custom domain</li>
</ul>
<a href="#" className="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border transition-colors border-white/80 bg-white/40 text-slate-800 hover:bg-white/70 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 className="h-full p-8 flex flex-col bg-white/60 backdrop-blur-xl border border-white/60 shadow-2xl rounded-xl ring-2 ring-[#4f46e5]">
<h3 className="text-lg font-semibold text-slate-900">Team</h3>
<p className="mt-1 text-sm text-slate-500">For growing companies.</p>
<p className="mt-6">
<span hidden={currency !== 'USD'}><span className="text-4xl font-bold text-slate-900">$79</span></span>
<span hidden={currency !== 'EUR'}><span className="text-4xl font-bold text-slate-900">€73</span></span>
<span hidden={currency !== 'GBP'}><span className="text-4xl font-bold text-slate-900">£62</span></span>
<span hidden={currency !== 'INR'}><span className="text-4xl font-bold text-slate-900">₹2,999</span></span>
<span hidden={currency !== 'JPY'}><span className="text-4xl font-bold text-slate-900">¥11,000</span></span>
<span className="text-sm text-slate-500">/month</span>
</p>
<ul className="list-none mt-6 mb-8 flex flex-col gap-2 flex-1">
<li className="text-sm text-slate-700">✓ Everything in Pro</li>
<li className="text-sm text-slate-700">✓ 10 seats included</li>
<li className="text-sm text-slate-700">✓ SSO & audit log</li>
</ul>
<a href="#" className="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 className="mt-6 text-center text-xs text-slate-500">Prices exclude local taxes. You are charged in the currency shown.</p>
</div>
</section>
);
}
More Tailwind components for React
All components →- Pricing Table A three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists
- Razorpay Checkout Form A two-column checkout with an order summary (subtotal, GST, total in INR), contact fields, a UPI / card / netbanking selector and a pay button that opens Razorpay Checkout
- FAQ Accordion A frequently-asked-questions section with four expandable items, each toggled by a button that exposes its state via aria-expanded
- Feature Grid A marketing section with a centered heading and a responsive grid of six feature cards, each with an icon badge, title and description
- Testimonial Slider A customer testimonial carousel that shows one quote at a time with labelled slide buttons — no autoplay, so users stay in control
- Login Modal A centered sign-in dialog with email and password fields, “remember me”, a forgot-password link and a social sign-in button
- Signup Form A registration card with name, email and password fields, a password hint, a terms-of-service checkbox and a primary call to action
- Navbar A responsive top navigation bar with a logo, primary links, a sign-in/CTA pair on desktop and a collapsible hamburger menu on mobile
Install Tailwind CSS for React
Create a React project with Vite, then add Tailwind CSS v3:
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -pSet content: ['./index.html', './src/**/*.{js,jsx}'] in tailwind.config.js, and add to src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;The brand color is applied with arbitrary values such as bg-[#4f46e5], so no theme configuration is needed.
Use the currency pricing table in React
// App.jsx
import CurrencyPricing from './CurrencyPricing';
export default function App() {
return <CurrencyPricing />;
}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. The glass style relies on backdrop-filter, supported in all current browsers; place it over a colorful background for the best effect.
Compatibility
| Item | Details |
|---|---|
| CSS framework | Tailwind CSS v3.4+ |
| Library | React 18+ (function component) |
| Interactive state | currency |
| Dark mode | Yes — toggle in the editor |
| Style | Glassmorphism (backdrop blur) |
Frequently asked questions
How do I install this Tailwind currency pricing table in React?
Create a React project, 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.