devsnips
Search docs, APIs, guides…

Section

Pricing Comparison Table — Vercel

Dark monochrome comparison matrix with a sticky plan header row (Starter / Scale / Enterprise), grouped feature sections, and check/dash/slash glyphs. Hairline grid borders, a single teal accent on the popular column, sticky first column on desktop, and white CTAs per column.

  • Section
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Sticky plan header row
  • Grouped feature sections
  • Check/dash/slash glyphs
  • Sticky first column on desktop
  • Hairline grid borders
  • Teal accent on popular column
  • Per-column white CTAs
  • Monochrome hierarchy

Preview

Live section

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/sections/saas/pricing-comparison/vercel/
fluid · no fixed width 100%
Dependencies: Tailwind CSS (CDN) · Google Fonts: Geist, Geist Mono Responsive

Install

Add to your project

terminal
npx devsnips add Tailwind/Sections/SaaS/pricing-comparison/vercel
registry path: Tailwind/Sections/SaaS/pricing-comparison/vercel

Source

Implementation

code.html 
<!--
Snippet Name: Pricing Comparison Table — Vercel
Description: Dark comparison matrix with sticky plan header, grouped feature rows, and check/dash/slash glyphs.
Author: DevSnips Contributors
Usage Example: Drop into a pricing/compare section. Swap plan names and feature rows as needed.
-->
<section class="relative w-full px-6 py-16 sm:py-24" data-compare="vc">

  <div class="mx-auto max-w-6xl">
    <div class="mb-10 max-w-xl">
      <p class="vc-mono mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/50"><span class="vc-dot"></span> Compare plans</p>
      <h2 class="font-g text-[34px] font-semibold leading-[1.05] tracking-tight sm:text-[44px]">Every feature, side by side.</h2>
    </div>

    <div class="overflow-x-auto rounded-[14px] border border-white/10 bg-[#0a0a0a] shadow-[0_0_0_1px_rgba(255,255,255,0.02),0_20px_60px_-20px_rgba(0,0,0,0.9)]">
      <table class="w-full min-w-[720px] border-collapse text-left">
        <caption class="sr-only">Plan comparison</caption>
        <thead>
          <tr class="border-b border-white/10">
            <th scope="col" class="vc-mono sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[11px] font-medium uppercase tracking-wider text-white/40">Features</th>
            <th scope="col" class="p-5">
              <p class="font-g text-[15px] font-semibold text-white">Starter</p>
              <p class="vc-mono mt-1 text-[12px] text-white/45">$0 /mo</p>
            </th>
            <th scope="col" class="p-5">
              <span class="vc-mono mb-2 inline-flex items-center gap-1.5 rounded-full border border-[#50e3c2]/30 bg-[#50e3c2]/10 px-2 py-0.5 text-[10px] text-[#50e3c2]"><span class="vc-dot"></span> Popular</span>
              <p class="font-g text-[15px] font-semibold text-white">Scale</p>
              <p class="vc-mono mt-1 text-[12px] text-white/45">$49 /mo</p>
            </th>
            <th scope="col" class="p-5">
              <p class="font-g text-[15px] font-semibold text-white">Enterprise</p>
              <p class="vc-mono mt-1 text-[12px] text-white/45">Custom</p>
            </th>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th class="sticky left-0 z-10 bg-[#0a0a0a] p-5"></th>
            <th class="p-5"><a href="#" class="vc-mono inline-flex w-fit rounded-lg border border-white/10 bg-white px-4 py-2 text-[12px] font-medium text-black transition-colors hover:bg-white/90">Start free</a></th>
            <th class="p-5"><a href="#" class="vc-mono inline-flex w-fit rounded-lg bg-[#50e3c2] px-4 py-2 text-[12px] font-medium text-black transition-colors hover:bg-[#50e3c2]/90">Start trial</a></th>
            <th class="p-5"><a href="#" class="vc-mono inline-flex w-fit rounded-lg border border-white/10 bg-white/[0.04] px-4 py-2 text-[12px] font-medium text-white transition-colors hover:border-white/20">Talk to sales</a></th>
          </tr>
        </thead>
        <tbody class="divide-y divide-white/[0.07]">

          <!-- group: Core -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Core</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Events / day</th>
            <td class="vc-mono p-5 text-[13px] text-white/70">1,000</td>
            <td class="vc-mono p-5 text-[13px] text-white">1,000,000</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Seats</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="vc-mono p-5 text-[13px] text-white">10</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
          </tr>

          <!-- group: Automation -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Automation</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">AI triage</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Workflow automations</th>
            <td class="vc-mono p-5 text-[13px] text-white/70">3</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">SLA engine</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>

          <!-- group: Security -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Security</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">SAML SSO</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">SCIM provisioning</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Audit log export</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>

          <!-- group: Support -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Support</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Support channels</th>
            <td class="vc-mono p-5 text-[13px] text-white/70">Community</td>
            <td class="vc-mono p-5 text-[13px] text-white">Priority email</td>
            <td class="vc-mono p-5 text-[13px] text-white">Dedicated CSM</td>
          </tr>
          <tr>
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Uptime SLA</th>
            <td class="vc-mono p-5 text-[13px] text-white/40">—</td>
            <td class="vc-mono p-5 text-[13px] text-white">99.9%</td>
            <td class="vc-mono p-5 text-[13px] text-[#50e3c2]">99.99%</td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="vc-mono mt-4 text-[11px] text-white/35">All plans include unlimited integrations and export to CSV. Prices in USD.</p>
  </div>
</section>
121 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this section 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://sections/saas/pricing-comparison/vercel
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/sections/saas/pricing-comparison/vercel/

Install: npx devsnips add
Tailwind/Sections/SaaS/pricing-comparison/vercel

This is the Pricing Comparison Table — Vercel — Dark monochrome comparison matrix with a sticky plan header row (Starter / Scale / Enterprise), grouped feature sections, and check/dash/slash glyphs. Hairline grid borders, a single teal accent on the popular column, sticky first column on desktop, and white CTAs per column.

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
devsnips://sections/saas/pricing-comparison/vercel