Tailwind CSS Pricing Component Components

Pricing Plans Section Component

A responsive, three-column Tailwind CSS Pricing section with distinct plans, a highlighted 'Most Popular' option, and clear feature lists for easy comparison component.

LTR

RTL

<section class="py-20 bg-gray-50 dark:bg-gray-800">
    <div class="mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-16 text-center">
            <h2 class="mb-4 text-4xl font-bold text-gray-900 sm:text-5xl dark:text-white">
                Simple, Transparent Pricing
            </h2>
            <p class="mx-auto text-xl text-gray-600 dark:text-gray-300">
                Choose the perfect plan for your business needs. All plans include our core features with no hidden fees.
            </p>
        </div>
        <div class="grid gap-8 mb-16 md:grid-cols-3">
            <div class="transition-shadow duration-300 p-8 border border-gray-200 rounded-2xl bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
                <div class="mb-8 text-center">
                    <h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
                        Starter
                    </h3>
                    <p class="mb-6 text-gray-600 dark:text-gray-300">
                        Perfect for small businesses getting started
                    </p>
                    <div class="items-baseline justify-center flex">
                        <span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">29</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
                    </div>
                </div>
                <ul class="space-y-4 mb-8">
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Up to 5 team members</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">10GB cloud storage</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Basic analytics</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Email support</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">SSL certificate</span>
                    </li>
                </ul>
                <button class="transition-all duration-200 w-full px-6 py-3 border-2 border-gray-300 rounded-lg bg-transparent font-semibold text-gray-700 dark:border-blue-400 dark:text-blue-400">Get Started</button>
            </div>
            <div class="relative transition-shadow duration-300 transform p-8 border-2 border-blue-600 rounded-2xl bg-white shadow-xl dark:border-blue-400 dark:bg-gray-900">
                <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span class="px-4 py-2 rounded-full bg-blue-600 text-sm font-medium text-white">Most Popular</span>
                </div>
                <div class="mb-8 text-center">
                    <h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
                        Professional
                    </h3>
                    <p class="mb-6 text-gray-600 dark:text-gray-300">
                        Ideal for growing businesses and teams
                    </p>
                    <div class="items-baseline justify-center flex">
                        <span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">79</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
                    </div>
                </div>
                <ul class="space-y-4 mb-8">
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Up to 25 team members</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">100GB cloud storage</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Advanced analytics & reporting</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Priority support & live chat</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">API access & integrations</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Advanced security features</span>
                    </li>
                </ul>
                <button class="transform transition-all duration-200 w-full px-6 py-3 rounded-lg bg-blue-600 font-semibold text-white shadow-lg">Start Free Trial</button>
            </div>
            <div class="transition-shadow duration-300 p-8 border border-gray-200 rounded-2xl bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900">
                <div class="mb-8 text-center">
                    <h3 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
                        Enterprise
                    </h3>
                    <p class="mb-6 text-gray-600 dark:text-gray-300">
                        For large organizations with custom needs
                    </p>
                    <div class="items-baseline justify-center flex">
                        <span class="text-4xl font-bold text-gray-900 dark:text-white">$</span><span class="text-5xl font-bold text-gray-900 dark:text-white">199</span><span class="ml-1 rtl:mr-1 rtl:ml-0 text-xl text-gray-600 dark:text-gray-300">/month</span>
                    </div>
                </div>
                <ul class="space-y-4 mb-8">
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Unlimited team members</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">1TB cloud storage</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Custom analytics & dashboards</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">24/7 dedicated support</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Advanced API & custom integrations</span>
                    </li>
                    <li class="items-start flex">
                        <svg class="w-5 h-5 text-green-500 mr-3 rtl:ml-3 rtl:mr-0 mt-0.5" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        <span class="text-gray-700 dark:text-gray-300">Enterprise-grade security & compliance</span>
                    </li>
                </ul>
                <button class="transform transition-all duration-200 w-full px-6 py-3 rounded-lg bg-gray-900 font-semibold text-white shadow-lg dark:bg-gray-100 dark:text-gray-900">Contact Sales</button>
            </div>
        </div>
    </div>
</section>

Accordion Pricing List Component

A vertical list of Tailwind CSS Pricing tiers where selecting a plan expands it to reveal key features, maintaining a clean and focused layout with toggleable billing cycles component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Interactive Pricing Calculator Component

A glassmorphic Tailwind CSS Pricing calculator with a draggable range slider, real-time cost estimation, and floating gradient background effects component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Kinetic Pricing Grid Component

A dynamic Tailwind CSS Pricing table featuring a monthly/yearly toggle, hover-triggered focus effects, and a highlighted popular tier with an ambient glow effect component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Tiered Pricing Showcase Component

A responsive Tailwind CSS Pricing section featuring a monthly/yearly toggle switch, highlighted popular tier, and clean feature lists, adaptable to both light and dark modes component.

LTR

RTL

function calculateAdvancedMetrics(data) {
                          const metrics = {
                              performance: [],
                              efficiency: {},
                              trends: new Map()
                          };
                          
                          data.forEach((item, index) => {
                              const weightedScore = item.value * Math.pow(0.95, index);
                              metrics.performance.push({
                                  score: weightedScore,
                                  timestamp: item.timestamp,
                                  confidence: calculateConfidence(item)
                              });
                          });
                          
                          const model = await loadPreTrainedModel();
                          const predictions = model.predict(metrics.performance);
                          
                          return {
                              ...metrics,
                              predictions,
                              accuracy: calculateAccuracy(predictions),
                              recommendations: generateRecommendations(metrics)
                          };
                      }

                      class DataAnalyzer {
                          constructor(config) {
                              this.config = config;
                              this.cache = new LRUCache(1000);
                              this.workers = new WorkerPool(4);
                          }
                          
                          async analyze(dataset) {
                              const chunks = this.chunkData(dataset);
                              const results = await Promise.all(
                                  chunks.map(chunk => this.workers.process(chunk))
                              );
                              
                              return this.aggregateResults(results);
                          }
                      }

Premium Code Access

Unlock advanced code snippets, frameworks, and exclusive developer resources with our premium membership.

Full source code access

Advanced frameworks & libraries

Priority support & updates

Upgrade to Premium

Build Your Way with WavyKits' Components

Pricing Component

Pricing Plans Section Component

Accordion Pricing List Component

Premium Code Access

Interactive Pricing Calculator Component

Premium Code Access

Kinetic Pricing Grid Component

Premium Code Access

Tiered Pricing Showcase Component

Premium Code Access

Build Your Way with WavyKits'
Components