Category

Sort by:

Tailwind CSS Pricing Sections

Use these tailwind pricing section or pricing table designs to showcase diverse pricing packages for your service or product on your landing page.

image

Pricing with radio component

Following example is splitted between vertical radio component where you can show one pricing plan by clicking on radio button and feature list cards.

image

Dark pricing card

Use this tailwind pricing section to show pricing card with dark background and light text color alongwith pricing all pricing details.

image

Four tier pricing plan

Following example show four pricing cards in a row with different color background and hover effect to highlight cards.

image

Single pricing plan

Below is an example of single pricing plan card with toggle component, pricing title, feature list and CTA button.

image

Pricing table for dark version

Following example is specially designed for dark version where you can show two pricing card in one row alongwith pricing title, description, feature list and CTA Button.

image

Pricing plans with image header

Use this tailwind pricing example to show pricing plans with image on top of the card alongwith pricing title, description, feature list and CTA Button.

image

Vertical accordion pricing plans

Use this unique tailwind pricing component which showcase pricing card in a vertical manner with accordion component where feature list opens in a collpase.

image

Two column horizontal pricing cards

Use this tailwind ui pricing to show two pricing cards in a single row which includes pricing title, description and CTA button.

image

Two column stylish pricing plans

Use this tailwind pricing example to show two column pricing plans where one card has large features list which displays horizontally.

image

Two tier pricing cards

Use following example shows pricing plans in a two columns alongwith main section heading and pricing features.

image

Scaled pricing card

Following example show slightly scaled center pricing card as more preferrable options alongwith pricing title, pricing count and some description.

image

Header background pricing card

Use this example to highlight pricing card header by adding background and show pricing title, description, price count above pricing features and CTA Button.

image

Pricing cards with colored border

Following tailwind ui pricing plans where you can highlight cards by adding different color border on top of each pricing card.

image

Pricing plan with seperate headers

Use below tailwind pricing table where you can show separate card header for pricing title, description and CTA button.

image

Pricing with a Toggle Switch

Use this pricing example to show a horizontal pricing plans with a toggle switcher with pricing title, description, features and CTA button.

image

Pricing components with illustration

Use following example of tailwind css pricing component where you can show illustration at top of the card alongwith pricing title and pricing count.

image

Horizontal pricing plans

Utilize this pricing block to display two plans side by side, highlighting one as the preferred choice to create a clear visual distinction.

image

Pricing cards with graph image

Use this tailwind css pricing table to show a gradient pricing card with a graph image alongwith pricing plan cards.

image

Center align tailwind pricing cards

Use this tailwind pricing sections to show a pricing plan with three pricing cards in a single row with pricing features and CTA button.

image

Pricing with image card

Use this tailwind pricing component to show a pricing plan with an image card alongwith pricing cards in a simgle row.

image

Tailwind css pricing table

Use below example of pricing table with difference color backgrounds and toggle component to toggle between monthly and yearly plan.

image

Two column pricing cards

Following example can be used when you want to show two tailwind css pricing cards side by side alongwith toggle component.

image

Pricing plan with toggle switch

Use this tailwind ui pricing example to show a two pricing cards with a toggle switch that allows the website visitor to toggle based on a monthly or yearly plan.

image

Pricing cards with vertical tabs

Use this tailwind pricing example to show a pricing plan that adjusts according to the tab selected by the website visitor, based on the Tabs component.

Tailwind Code Copied to Clipboard!

Tailwind Code is ready to be pasted (Ctrl+V) into your project.

Uh-oh, Something’s gone wrong!

Don’t let this bug you Contact Us and we’ll squash it together!