Pricing Tables

The pricing table component allows users to get an overview of what pricing plans are offered and how they differ, on a product or service.

BasicIdeal for individual developers.

$15/month

Fully featured headless CMS, now including GraphQL
Language and framework agnostic

TeamIdeal for a small team.

$25/month

Decoupled microservices architecture evolves with your project
Expanded authoring roles and locales to support basic publishing workflows
Easy payment via credit card

PremiumIdeal for organizations.

$85/month

Open platform with SDKs, App Framework and design system
Access technical support via email or in-app messaging
Optimize your governance model with enough users, roles & permissions, and locales for the largest global organizations
Access to our Customer Success Managers, Solution Architects and Professional Services offerings

Variations

Basic

Copy as:HTMLReact

BasicIdeal for individual developers.

$15/month

copydone

TeamIdeal for a small team.

$25/month

copydone

PremiumIdeal for organizations.

$85/month

copydone

<!-- Component: Basic Pricing Table -->
<div class="max-w-sm mx-auto overflow-hidden bg-white rounded shadow-lg text-slate-500 shadow-slate-200 lg:max-md-full">
  <div class="flex flex-col">
    <header class="flex flex-col gap-6 p-6 text-slate-400">
      <h3 class="text-xl font-bold text-slate-700">
        Basic
        <span class="block text-sm font-normal text-slate-400">Ideal for individual developers.</span>
      </h3>
      <h4>
        <span class="text-3xl">$</span>
        <span class="text-5xl font-bold tracking-tighter transition-all duration-300 text-slate-700 lg:text-6xl">15</span>
        <span class="text-sm">/month</span>
      </h4>
      <button class="inline-flex items-center justify-center w-full h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 rounded shadow-lg whitespace-nowrap bg-emerald-500 shadow-emerald-100 hover:bg-emerald-600 hover:shadow-md hover:shadow-emerald-100 focus:bg-emerald-700 focus:shadow-md focus:shadow-emerald-100 focus-visible:outline-none">
        <span>Try for free</span>
      </button>
    </header>
  </div>
</div>
<!-- End Basic Pricing Table -->

Detailed

Copy as:HTMLReact

BasicIdeal for individual developers.

$15/month

Fully featured headless CMS, now including GraphQL
Language and framework agnostic

copydone

TeamIdeal for a small team.

$25/month

Decoupled microservices architecture evolves with your project
Expanded authoring roles and locales to support basic publishing workflows
Easy payment via credit card

copydone

PremiumIdeal for organizations.

$85/month

Open platform with SDKs, App Framework and design system
Access technical support via email or in-app messaging
Optimize your governance model with enough users, roles & permissions, and locales for the largest global organizations
Access to our Customer Success Managers, Solution Architects and Professional Services offerings

copydone

<!-- Component: Basic Pricing Table with Details -->
<div class="max-w-sm mx-auto overflow-hidden bg-white rounded shadow-lg text-slate-500 shadow-slate-200 lg:max-md-full">
  <div class="flex flex-col">
    <header class="flex flex-col gap-6 p-6 text-slate-400">
      <h3 class="text-xl font-bold text-slate-700">
        Basic
        <span class="block text-sm font-normal text-slate-400">Ideal for individual developers.</span>
      </h3>
      <h4>
        <span class="text-3xl">$</span>
        <span class="text-5xl font-bold tracking-tighter transition-all duration-300 text-slate-700 lg:text-6xl">15</span>
        <span class="text-sm">/month</span>
      </h4>
      <button class="inline-flex items-center justify-center w-full h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 rounded shadow-lg whitespace-nowrap bg-emerald-500 shadow-emerald-100 hover:bg-emerald-600 hover:shadow-md hover:shadow-emerald-100 focus:bg-emerald-700 focus:shadow-md focus:shadow-emerald-100 focus-visible:outline-none">
        <span>Try for free</span>
      </button>
    </header>
    <div class="p-6">
      <ul class="space-y-4">
        <li class="flex items-start gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 p-1 shrink-0 text-emerald-500" aria-hidden="true">
            <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
          </svg>
          Fully featured headless CMS, now including GraphQL
        </li>
        <li class="flex items-start gap-2">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 p-1 shrink-0 text-emerald-500" aria-hidden="true">
            <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd" />
          </svg>
          Language and framework agnostic
        </li>
      </ul>
    </div>
    <footer class="p-6 text-sm text-center border-t border-slate-200 bg-slate-100">
      <a class="transition-colors duration-300 text-emerald-500 hover:text-emerald-600 focus:text-emerald-700" href="#">See all features</a>
    </footer>
  </div>
</div>
<!-- End Basic Pricing Table with Details -->

Gems

Copy as:HTMLReact

Emerald

1 public project
public working space
unlimited pages
5 revisions

copydone

Ruby

4 public project
private working space
unlimited pages
10 revisions

copydone

Diamond

unlimited projects
private working space
unlimited pages
unlimited revisions

copydone

<!-- Component: Gem Pricing Table Emerald Variation -->
<div class="relative max-w-sm mx-auto mt-20 text-center bg-white rounded shadow-lg group shadow-slate-20 text-slate-500 lg:max-md-full">
  <img src="https://Tailwindmix.b-cdn.net/pricing-tables/emerald.png" alt="emerald" class="absolute left-1/2 block w-32 -translate-x-1/2 -translate-y-1/2 drop-shadow-[0_16px_16px_#84cc1650] group-hover:-translate-y-2/3 transition-transform duration-700" />
  <div class="flex flex-col">
    <header class="flex flex-col gap-6 p-6 pt-28 text-slate-400">
      <h3 class="text-xl font-medium uppercase text-emerald-500">Emerald</h3>
    </header>
    <div class="w-3 h-3 mx-auto rounded-full bg-emerald-500"></div>
    <div class="p-6">
      <ul class="space-y-4">
        <li class="w-full gap-2">1 public project</li>
        <li class="w-full gap-2">public working space</li>
        <li class="w-full gap-2">unlimited pages</li>
        <li class="w-full gap-2">5 revisions</li>
      </ul>
    </div>
    <footer>
      <button class="inline-flex items-center justify-center h-12 gap-2 px-6 text-sm font-medium tracking-wide text-white transition duration-300 translate-y-1/2 rounded shadow-xl whitespace-nowrap bg-emerald-500 shadow-emerald-100 hover:bg-emerald-600 focus:bg-emerald-700 focus-visible:outline-none"><span>Start now</span>- <span>$0</span></button>
    </footer>
  </div>
</div>
<!-- End Gem Pricing Table Emerald Variation -->

Usage

Use the pricing table component:

When there are more than one versions of a product to choose among.
When you want to allow users to have an overview of how products differ both in terms of features and price.

Don’t use pricing tables when the user can possibly buy more than one product at a time.

Specs

A pricing table consists of the following elements:

Table header: it can contain the price plan name in 1.25rem(20px) font size and a plan description with 0.875rem (14px) font size, the price with 3.65rem (60px) font size, and an action button.
Table body: Contains a list of the pricing plan features in 1rem (16px) font size.
Table footer (optional): contains a link to the detailed view of the pricing plan (0.875rem -14px font size).

Accessibility notes

No accessibility roles are required.

Pricing Tables

Variations

Basic

Detailed

Gems

Usage

Specs

Accessibility notes

Check out the latest release!