Collection of free Tailwind CSS pricing table components from Codepen and other resources.

Demo image: Whimsical - Pricing

Author

  • Dzaky Widya Putra

Made with

  • HTML / CSS

About a code

Whimsical - Pricing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.18

Demo image: Pricing Cards

Author

  • Tailus UI

Made with

  • HTML / CSS

About a code

Pricing Cards

Organization pricing cards section.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.18

Demo image: Tailwind CSS Pricing

Author

  • PostSrc

Made with

  • HTML / CSS

About a code

Tailwind CSS Pricing

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.7

Demo image: Responsive Horizontal Pricing

Author

  • Mike_Andreuzza

Made with

  • HTML / CSS

About a code

Responsive Horizontal Pricing

Responsive horizontal pricing cards with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Demo image: Pricing Page

Author

  • Kamona-WD

Made with

  • HTML / CSS / JS

About a code

Pricing Page

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.3

Demo image: Pricing Sections

Author

  • Karthik Ponnam

Made with

  • HTML / CSS

About a code

Pricing Sections

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Pricing Table with Tailwind CSS

Author

  • Travis Williamson

Made with

  • HTML / CSS

About a code

Pricing Table with Tailwind CSS

A pricing table built purely with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Tailwind Pricing Tables

Author

  • TailGrids

Made with

  • HTML / CSS

About a code

Tailwind Pricing Tables

Pricing plans table for Tailwind CSS. Pricing tables is essential for business sites and landing pages.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Pricing #1

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #2

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Pricing #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #3

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Pricing #3

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #4

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Pricing #4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #5

Author

  • Mamba UI

Made with

  • HTML / CSS

About a code

Pricing #5

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #6

Author

  • kitwind

Made with

  • HTML / CSS

About a code

Pricing #6

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #7

Author

  • kitwind

Made with

  • HTML / CSS

About a code

Pricing #7

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #8

Author

  • kitwind

Made with

  • HTML / CSS

About a code

Pricing #8

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Tabs - Tailwind CSS

Author

  • Cruip

Made with

  • HTML / CSS

About a code

Pricing Tabs - Tailwind CSS

A beautiful pricing tab made with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Tabs - Tailwind CSS + Alpine.js

Author

  • Cruip

Made with

  • HTML / CSS / JS

About a code

Pricing Tabs - Tailwind CSS + Alpine.js

Pricing tabs with toggle switch (month - year) made with Tailwind CSS and Alpine.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 2.0.0

Demo image: Lo-fi Pricing Table - Tailwind CSS

Author

  • Rob Stinson

Made with

  • HTML / CSS

About a code

Lo-fi Pricing Table - Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.10

Demo image: Pricing #9

Author

  • kitwind

Made with

  • HTML / CSS

About a code

Pricing #9

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #10

Author

  • kitwind

Made with

  • HTML / CSS

About a code

Pricing #10

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing #11

Author

  • kitwind

Made with

  • HTML / CSS

About a code

Pricing #11

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Simple

Author

  • MerakiUI

Made with

  • HTML / CSS

About a code

Pricing Simple

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Checkbox

Author

  • MerakiUI

Made with

  • HTML / CSS

About a code

Pricing Checkbox

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Checkbox With Details

Author

  • MerakiUI

Made with

  • HTML / CSS

About a code

Pricing Checkbox With Details

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Side By Side

Author

  • MerakiUI

Made with

  • HTML / CSS

About a code

Pricing Side By Side

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Popular

Author

  • MerakiUI

Made with

  • HTML / CSS

About a code

Pricing Popular

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing with Navigation

Author

  • MerakiUI

Made with

  • HTML / CSS

About a code

Pricing with Navigation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.0+

Demo image: Pricing Table with JS Toggle

Author

  • JohnJohnCodes

Made with

  • HTML / CSS / JS

About a code

Pricing Table with JS Toggle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Plan Pricing Table

Author

  • masmerino13

Made with

  • HTML / CSS

About a code

Plan Pricing Table

Well, another pricing table.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Tailwind Responsive Table

Author

  • AaronMcGuire

Made with

  • HTML / CSS

About a code

Tailwind Responsive Table

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.6

Demo image: Stripe Pricing

Author

  • SimonDepelchin

Made with

  • HTML / CSS

About a code

Stripe Pricing

A reproduction of Stripe's pricing page.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 0.3.0