devsnips

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

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.dev/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>
68 lines UTF-8 · LF · Spaces: 2

AI-ready

Available to your agent.

This component is reachable through the DevSnips CLI, MCP server and Skills integrations — one registry, one resource path.

Resource path

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

Continue browsing

Related components

View all
Basic Table Tailwind Clean and professional data table with project information including icons, status badges, dates, and budget. Features subtle hover states and well-organized data hierarchy. tailwind / components / tables / basic-table Analytics Table Tailwind Marketing analytics table showing traffic sources with channel icons, conversion metrics, revenue data, and inline sparkline trend charts. tailwind / components / tables / analytics-table Compact Table Tailwind Dense cryptocurrency market data table with compact spacing. Features cryptocurrency logos, inline sparkline charts, percentage changes with color coding, and efficient use of horizontal space. tailwind / components / tables / compact-table