Tailwind CSS Pricing Sections

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.

Dark pricing card

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

Four tier pricing plan

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

Single pricing plan

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

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.

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.

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.

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.

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.

Two tier pricing cards

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

Scaled pricing card

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

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.

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.

Pricing plan with seperate headers

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

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.

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.

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.

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.

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.

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.

Tailwind css pricing table

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

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.

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.

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.