- No data uploaded
- Instant results
Tailwind CSS Pricing Table for Vue 3
A production-ready minimal pricing table: a three-tier pricing section with a monthly/yearly billing toggle, a highlighted “most popular” plan and feature checklists. Pick your brand color, toggle dark mode and corner radius — the live preview and the Vue 3 code update instantly in your browser.
Live component editor
Live preview
<script setup>
import { ref } from 'vue';
const yearly = ref(false);
</script>
<template>
<section class="py-16 px-6">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold text-slate-900">Simple, transparent pricing</h2>
<p class="mt-2 text-slate-500">Start free. Upgrade when you need more.</p>
<button type="button" 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 mt-6" @click="yearly = !yearly">
<span v-show="!yearly">Billed monthly · switch to yearly (save 20%)</span>
<span v-show="yearly">Billed yearly · switch to monthly</span>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<div class="h-full p-8 flex flex-col bg-white border border-slate-200 shadow-sm rounded-xl">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-slate-900">Starter</h3>
</div>
<p class="mt-1 text-sm text-slate-500">For side projects.</p>
<p class="mt-6">
<span class="text-4xl font-bold text-slate-900"><span v-show="!yearly">$0</span><span v-show="yearly">$0</span></span>
<span class="text-sm text-slate-500">/month</span>
</p>
<ul class="list-none mt-6 mb-8 flex flex-col gap-3 flex-1">
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>1 project</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Community support</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Basic analytics</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">Get started</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]">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-slate-900">Pro</h3>
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-semibold rounded-full bg-[#4f46e5]/10 text-[#4f46e5]">Most popular</span>
</div>
<p class="mt-1 text-sm text-slate-500">For growing teams.</p>
<p class="mt-6">
<span class="text-4xl font-bold text-slate-900"><span v-show="!yearly">$29</span><span v-show="yearly">$24</span></span>
<span class="text-sm text-slate-500">/month</span>
</p>
<ul class="list-none mt-6 mb-8 flex flex-col gap-3 flex-1">
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Unlimited projects</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Priority support</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Advanced analytics</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Custom domains</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">Start free trial</a>
</div>
</div>
<div>
<div class="h-full p-8 flex flex-col bg-white border border-slate-200 shadow-sm rounded-xl">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-slate-900">Enterprise</h3>
</div>
<p class="mt-1 text-sm text-slate-500">For large organisations.</p>
<p class="mt-6">
<span class="text-4xl font-bold text-slate-900"><span v-show="!yearly">$99</span><span v-show="yearly">$79</span></span>
<span class="text-sm text-slate-500">/month</span>
</p>
<ul class="list-none mt-6 mb-8 flex flex-col gap-3 flex-1">
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>SSO & SAML</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Dedicated manager</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>Audit logs</li>
<li class="flex items-start gap-2 text-sm text-slate-700"><svg class="shrink-0 mt-1 text-[#4f46e5]" width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 111.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z" clip-rule="evenodd"/></svg>99.99% SLA</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">Start free trial</a>
</div>
</div>
</div>
</div>
</section>
</template>
More Tailwind components for Vue 3
All components →- 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
- 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
- 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
- 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 Vue 3
Create a Vue 3 project with Vite, then add Tailwind CSS v3:
npm create vite@latest my-app -- --template vue
cd my-app
npm install
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -pSet content: ['./index.html', './src/**/*.{vue,js}'] in tailwind.config.js, and add to src/style.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 pricing table in Vue 3
<!-- App.vue -->
<script setup>
import PricingTable from './PricingTable.vue';
</script>
<template>
<PricingTable />
</template>Accessibility & customization
The billing switch is a real <button> with aria-pressed semantics handled by state, prices are plain text (no images), and decorative check icons are hidden with aria-hidden="true".
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
| Item | Details |
|---|---|
| CSS framework | Tailwind CSS v3.4+ |
| Library | Vue 3 (<script setup>) |
| Interactive state | yearly |
| Dark mode | Yes — toggle in the editor |
| Style | Minimal |
Frequently asked questions
How do I install this Tailwind pricing table in Vue 3?
Create a Vue 3 project, install Tailwind CSS as shown in the installation section, then paste the generated code.
Can I change the color of the 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 pricing table support dark mode?
Yes. Toggle “Dark mode” in the editor to generate a dark palette version of the same component.
Is the pricing table accessible?
The billing switch is a real <button> with aria-pressed semantics handled by state, prices are plain text (no images), and decorative check icons are hidden with aria-hidden="true".
Is this component free for commercial use?
Yes. The generated code is yours to use in personal and commercial projects without attribution.