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

Welcome to our collection of Tailwind examples! In this meticulously curated compilation, we have gathered a diverse range of code snippets that showcase the flexibility and efficiency of the Tailwind CSS framework.

Whimsical - Pricing

Whimsical - Pricing

Author:
Dzaky Widya Putra |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
3.0.18
Pricing Cards

Pricing Cards

Author:
Tailus UI |
Made with:
HTML / CSS

About a code

Organization pricing cards section.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
3.0.18
Tailwind CSS Pricing

Tailwind CSS Pricing

Author:
PostSrc |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
3.0.7
Responsive Horizontal Pricing

Responsive Horizontal Pricing

Author:
Mike_Andreuzza |
Made with:
HTML / CSS

About a code

Responsive horizontal pricing cards with Tailwind CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.3
Pricing Page

Pricing Page

Author:
Kamona-WD |
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
alpine.js
Tailwind version:
2.0.3
Pricing Sections

Pricing Sections

Author:
Karthik Ponnam |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.2
Pricing Table with Tailwind CSS

Pricing Table with Tailwind CSS

Author:
Travis Williamson | December 23, 2020
Made with:
HTML / CSS

About a code

A pricing table built purely with Tailwind CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.2
Tailwind Pricing Tables

Tailwind Pricing Tables

Author:
TailGrids |
Made with:
HTML / CSS

About a code

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+
Pricing #1

Pricing #1

Author:
Mamba UI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #2

Pricing #2

Author:
Mamba UI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #3

Pricing #3

Author:
Mamba UI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #4

Pricing #4

Author:
Mamba UI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #5

Pricing #5

Author:
Mamba UI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #6

Pricing #6

Author:
kitwind |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #7

Pricing #7

Author:
kitwind |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #8

Pricing #8

Author:
kitwind |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Tabs - Tailwind CSS

Pricing Tabs - Tailwind CSS

Author:
Cruip | December 5, 2021
Made with:
HTML / CSS

About a code

A beautiful pricing tab made with Tailwind CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Tabs - Tailwind CSS + Alpine.js

Pricing Tabs - Tailwind CSS + Alpine.js

Author:
Cruip | November 27, 2021
Made with:
HTML / CSS / JS

About a code

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
Lo-fi Pricing Table - Tailwind CSS

Lo-fi Pricing Table - Tailwind CSS

Author:
Rob Stinson | November 2, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
1.8.10
Pricing #9

Pricing #9

Author:
kitwind |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #10

Pricing #10

Author:
kitwind |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing #11

Pricing #11

Author:
kitwind |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Simple

Pricing Simple

Author:
MerakiUI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Checkbox

Pricing Checkbox

Author:
MerakiUI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Checkbox With Details

Pricing Checkbox With Details

Author:
MerakiUI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Side By Side

Pricing Side By Side

Author:
MerakiUI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Popular

Pricing Popular

Author:
MerakiUI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing with Navigation

Pricing with Navigation

Author:
MerakiUI |
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
2.0.0+
Pricing Table with JS Toggle

Pricing Table with JS Toggle

Author:
JohnJohnCodes |
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
1.4.6
Plan Pricing Table

Plan Pricing Table

Author:
masmerino13 |
Made with:
HTML / CSS

About a code

Well, another pricing table.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
1.4.6
Tailwind Responsive Table

Tailwind Responsive Table

Author:
AaronMcGuire | August 6, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
1.0.6
Stripe Pricing

Stripe Pricing

Author:
SimonDepelchin |
Made with:
HTML / CSS

About a code

A reproduction of Stripe's pricing page.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Tailwind version:
0.3.0

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨