Component

Pricing Comparison Table

Feature comparison matrix for SaaS pricing plans. Highlights popular tier, shows checkmarks and X marks for features, includes CTA buttons in footer row.

Component
Tailwind
HTML
MIT

What it does

Capabilities

Feature matrix
Highlighted column
Checkmarks
Pricing display
CTA buttons

Preview

Live component

Interactive preview

Open preview

9:41 100%

devsnips.site/library/tailwind/components/tables/pricing-comparison-table/

fluid · no fixed width 100%

No dependencies Production-ready

Install

Add to your project

terminal

npx devsnips add Tailwind/Components/Tables/pricing-comparison-table

registry path: Tailwind/Components/Tables/pricing-comparison-table

Source

Implementation

code.html

<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden overflow-x-auto">
  <table class="w-full min-w-[600px]">
    <thead>
      <tr class="bg-gray-50 border-b border-gray-200">
        <th class="px-6 py-4 text-left text-xs font-bold text-gray-600 uppercase tracking-wider w-1/4">Features</th>
        <th class="px-6 py-4 text-center text-xs font-bold text-gray-600 uppercase tracking-wider w-1/4">Starter</th>
        <th class="px-6 py-4 text-center text-xs font-bold bg-blue-50 text-blue-700 uppercase tracking-wider w-1/4">Professional <span class="ml-1 px-1.5 py-0.5 bg-blue-200 text-blue-800 text-[10px] rounded-full">Popular</span></th>
        <th class="px-6 py-4 text-center text-xs font-bold text-gray-600 uppercase tracking-wider w-1/4">Enterprise</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-100">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Price per month</td>
        <td class="px-6 py-4 text-center text-sm font-bold text-gray-900">$29</td>
        <td class="px-6 py-4 text-center text-sm font-bold text-blue-600 bg-blue-50/30">$79</td>
        <td class="px-6 py-4 text-center text-sm font-bold text-gray-900">$199</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Team members</td>
        <td class="px-6 py-4 text-center text-sm text-gray-600">Up to 5</td>
        <td class="px-6 py-4 text-center text-sm font-medium text-gray-900 bg-blue-50/30">Up to 20</td>
        <td class="px-6 py-4 text-center text-sm font-medium text-gray-900">Unlimited</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Storage</td>
        <td class="px-6 py-4 text-center text-sm text-gray-600">10 GB</td>
        <td class="px-6 py-4 text-center text-sm font-medium text-gray-900 bg-blue-50/30">100 GB</td>
        <td class="px-6 py-4 text-center text-sm font-medium text-gray-900">1 TB</td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">API access</td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center bg-blue-50/30"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Custom integrations</td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center bg-blue-50/30"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Analytics dashboard</td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center bg-blue-50/30"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Priority support</td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center bg-blue-50/30"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
      </tr>
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 text-sm font-medium text-gray-900">Dedicated account manager</td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center bg-blue-50/30"><svg class="w-5 h-5 mx-auto text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg></td>
        <td class="px-6 py-4 text-center"><svg class="w-5 h-5 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg></td>
      </tr>
      <tr class="bg-gray-50">
        <td class="px-6 py-4 rounded-bl-lg"></td>
        <td class="px-6 py-4 text-center"><button class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">Get Started</button></td>
        <td class="px-6 py-4 text-center bg-blue-50/30 rounded-none"><button class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200">Get Started</button></td>
        <td class="px-6 py-4 text-center rounded-br-lg"><button class="px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-100 transition-colors">Contact Sales</button></td>
      </tr>
    </tbody>
  </table>
</div>

# Pricing Comparison Table

Pricing comparison table.

## Usage
```bash
npx devsnips add Tailwind/Components/Tables/pricing-comparison-table
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`

68 lines UTF-8 · LF · Spaces: 2

DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/tables/pricing-comparison-table

Prompt instruction

I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/tables/pricing-comparison-table/

Install: npx devsnips add
Tailwind/Components/Tables/pricing-comparison-table

This is the Pricing Comparison Table — Feature comparison matrix for SaaS pricing plans. Highlights popular tier, shows checkmarks and X marks for features, includes CTA buttons in footer row.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI