Sections

Tailwind CSS Pricing Plans - Madhuranjan UI

Explore our collection of pricing page designs. Each layout is crafted to clearly present your pricing options and plans, ensuring a smooth and informative experience for your potential customers.

Simple Pricing Page

A minimalistic pricing layout for quick comparisons.

Built for modern teams of every size

At Madhuranjan UI, we focus on creating solutions where technology, innovation, and scalable strategies drive long-term growth.

Starter

Perfect for individual developers and small hobby projects.

$19/month
  • Basic setup guidance
  • Up to 1 developer
  • Email support: 3 months
  • Free updates: 3 months
Get Started

Team

Ideal for growing teams that need more advanced features.

$69/month
  • Customizable configuration
  • No hidden fees
  • Team size: up to 15 developers
  • Priority support: 12 months
  • Free updates: 12 months
Get Started

Enterprise

Best for large-scale organizations demanding full control.

$299/month
  • Advanced customization
  • No hidden fees
  • Team size: 100+ developers
  • Dedicated support: 24 months
  • Free updates: 24 months
Get Started 
1   <div class="mx-auto bg-gray-50 px-2 py-5 dark:bg-black">
2  <div class="mx-auto mb-8 max-w-screen-md text-center lg:mb-12">
3    <h2 class="mb-4 text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">Built for modern teams of every size</h2>
4    <p class="mb-5 font-normal text-gray-900 sm:text-lg dark:text-gray-200">At Madhuranjan UI, we focus on creating solutions where technology, innovation, and scalable strategies drive long-term growth.</p>
5  </div>
6
7  <div class="flex justify-center items-center gap-2 p-2 flex-wrap">
8
9    <div class="mx-auto flex w-full  md:w-72 max-w-lg flex-col rounded-lg border border-gray-200 bg-white p-6 text-center text-gray-900 shadow xl:p-5 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
10      <h3 class="mb-4 text-2xl font-semibold">Starter</h3>

Pricing with Monthly or Yearly

A yearly pricing layout featuring a unique monstyl design.

Simple pricing for everyone.

Save up to 30%
Free
$0/ Month

Individual Plan

  • AI advisor for a day
  • 2 auto tracking
  • 7 Day transaction clearing
  • 24/7 Customer support
Popular
$150/ Month

Business Plan

  • AI advisor full time
  • Unlimited auto tracking
  • 1 Day transaction clearing
  • Priority customer support
Advanced
$180/ Month

Enterprise Plan

  • AI advisor full time
  • Unlimited auto tracking
  • 1 Day transaction clearing
  • Priority customer support
1<div class="mx-auto bg-gray-50 px-4 py-8 dark:bg-gray-900">
2  <div class="mx-auto mb-6 flex max-w-screen-xl flex-col items-start justify-between gap-4 md:flex-row md:items-center">
3    <h2 class="text-3xl font-extrabold tracking-tight text-gray-800 sm:text-4xl dark:text-gray-50">Simple pricing for everyone.</h2>
4    <div class="flex items-center gap-4">
5      <div class="flex items-center text-sm text-gray-600 dark:text-gray-300">
6        <svg class="mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true">
7          <path
8            d="M488.6 280.1c15.3-15.3 15.3-40.3 0-55.6L287.5 23.4C280.5 16.4 270.4 12 259.7 12H40c-22 0-40 17.9-40 40v219.7c0 10.7 4.4 20.8 11.4 27.8l201.1 201.1c15.3 15.3 40.3 15.3 55.6 0l220.5-220.5zM129 178c-13.3 0-24-10.7-24-24s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24zm48 48c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 
9            10.7-24 24-24zm120-48c-13.3 0-24-10.7-24-24 
10            s10.7-24 24-24 24 10.7 24 24-10.7 24-24 24z"

Pricing with Table

Display your pricing plans in a structured table format.

Starter

$59Per Month

Best suited for freelancers who work individually.

Agency

$99Per Month

Best suited for agencies and small businesses.

Extended

$149Per Month

Best suited for agencies and large businesses.

Key FeaturesFeatures LimitsFeatures LimitsFeatures Limits
Seats1 Developer5 Developer20 Developer
Domains/Products5 Products5 Products5 Products
Email Support6 Months6 Months6 Months
All Pro Components
Design Source Files
1    <div class="bg-gray-50 px-2 py-8 dark:bg-gray-900">
2      <div class="mx-auto max-w-full overflow-hidden rounded-md bg-white shadow-md dark:bg-gray-800">
3        <div class="flex justify-center items-center flex-wrap gap-3 p-4">
4          <div class="flex flex-col w-full md:w-72 justify-between space-y-4 p-4">
5            <div>
6              <h3 class="mb-1 text-xl font-semibold text-gray-800 dark:text-white">
7                Starter
8              </h3>
9              <p class="text-2xl font-bold text-gray-700 dark:text-gray-200">
10                $59

Pricing with Toggle

Easily switch between pricing options with this toggle-enabled layout.

Choose your plan

7 Days free trial. No credit card required.

Bill MonthlyBill Yearly
Free
$0/ Month
  • AI advisor for a day
  • 2 auto tracking
  • 7 Day transaction clearing
  • 24/7 Customer support
Premium Popular
$150/ Month
  • AI advisor full time
  • Unlimited auto tracking
  • 1 Day transaction clearing
  • Priority customer support
Enterprise
$180/ Month
  • AI advisor full time
  • Unlimited auto tracking
  • 1 Day transaction clearing
  • Priority customer support
1<div class="flex min-h-screen w-full flex-col items-center bg-white px-4 py-10 dark:bg-gray-900">
2  <!-- Heading Section -->
3  <div class="mb-8 w-full max-w-xl text-center">
4    <h1 class="mb-2 text-3xl font-extrabold text-gray-800 md:text-4xl dark:text-gray-50">Choose your plan</h1>
5    <p class="text-sm text-gray-500 md:text-base dark:text-gray-400">7 Days free trial. No credit card required.</p>
6    <!-- Toggle -->
7    <div class="mt-4 flex items-center justify-center gap-2">
8      <span class="text-sm text-gray-700 md:text-base dark:text-gray-300">Bill Monthly</span>
9      <label class="relative inline-flex cursor-pointer items-center">
10        <input type="checkbox" class="peer sr-only" />

Pricing Table with Icon

Enhance your pricing details with visual icons to guide customer choice.

Transparent Pricing

Simple plans with no hidden fees. Start with a 7-day free trial.

MonthlyYearly 20% OFF

Starter

$19/mo

Perfect for individuals

  • Up to 5 projects
  • Basic analytics
  • Email support
  • Priority support
POPULAR

Professional

$49/mo

For growing businesses

  • Unlimited projects
  • Advanced analytics
  • Priority support
  • Custom domains

Enterprise

$99/mo

For large organizations

  • Unlimited users
  • 24/7 support
  • Dedicated manager
  • Custom integrations

All plans include our 7-day free trial with no credit card required.

Need something custom? Contact our sales team

1<div class="flex w-full flex-col items-center bg-gradient-to-r from-violet-500 to-blue-500 px-4 py-16 dark:from-blue-900 dark:to-gray-900">
2  <div class="mb-12 w-full max-w-4xl text-center">
3    <h2 class="text-4xl font-extrabold text-white md:text-5xl dark:text-gray-50">Transparent Pricing</h2>
4    <p class="mt-4 text-lg text-gray-100 md:text-xl">Simple plans with no hidden fees. Start with a 7-day free trial.</p>
5
6    <div class="mt-6 flex items-center justify-center gap-4">
7      <span class="text-base font-medium text-white dark:text-gray-200"> Monthly </span>
8      <label class="relative inline-flex cursor-pointer items-center">
9        <input type="checkbox" class="peer sr-only" />
10        <div class="peer h-7 w-14 rounded-full bg-gray-200 transition-colors duration-300 ease-in-out peer-checked:bg-violet-600 peer-focus:ring-2 peer-focus:ring-violet-500 peer-focus:outline-none after:absolute after:start-[4px] after:top-[4px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:duration-300 after:ease-in-out after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-500 dark:bg-gray-600 dark:peer-focus:ring-violet-800"></div>

Pricing Table with Gradient Card

A vibrant layout featuring gradient cards for a modern pricing display.

Pricing Plans

Choose Your Perfect Plan

Simple, transparent pricing with no hidden fees. Start with a 14-day free trial.

MonthlyYearly Save 20%

Starter

$29/month

Perfect for individuals

  • 10 GB Storage
  • Basic Analytics
  • Community Access
  • Priority Support
BEST VALUE

Business

$59/month

For growing teams

  • 100 GB Storage
  • Advanced Analytics
  • Premium Support
  • API Access

Ultimate

$99/month

For enterprises

  • Unlimited Storage
  • Dedicated Account Manager
  • 24/7 Priority Support
  • Custom Integrations

All plans include our 14-day free trial with no credit card required.

Need something custom? Contact our sales team

1 <div class="flex w-full flex-col items-center bg-gray-50 px-4 py-16 dark:bg-gray-900">
2  <div class="mb-12 w-full max-w-4xl text-center">
3    <span class="mb-3 inline-block rounded-full bg-violet-100 px-4 py-1 text-sm font-semibold text-violet-600 dark:bg-violet-900/30 dark:text-violet-300">Pricing Plans</span>
4    <h2 class="text-4xl font-extrabold text-gray-800 md:text-5xl dark:text-gray-50">Choose Your Perfect Plan</h2>
5    <p class="mt-4 text-lg text-gray-600 md:text-xl dark:text-gray-400">Simple, transparent pricing with no hidden fees. Start with a 14-day free trial.</p>
6
7     <div class="mt-6 flex items-center justify-center gap-4">
8      <span class="text-base font-medium text-gray-700 dark:text-gray-300">Monthly</span>
9      <label class="relative inline-flex cursor-pointer items-center">
10        <input type="checkbox" class="peer sr-only" />

Four Table Pricing Plan

An organized four-table layout designed for clear plan differentiation.

Flexible Pricing

Choose Your Perfect Plan

Simple, transparent pricing with no hidden fees. Start with a 14-day free trial.

MonthlyYearly Save 20%

Basic

$15/mo

For individuals

  • Single User
  • 5 Projects
  • Email Support
  • API Access
POPULAR

Standard

$25/mo

For small teams

  • 5 Users
  • 20 Projects
  • Priority Support
  • Basic API Access

Professional

$49/mo

For growing businesses

  • Unlimited Users
  • Unlimited Projects
  • Phone Support
  • Full API Access

Enterprise

$99/mo

For large organizations

  • Enterprise SLA
  • Custom Integrations
  • Dedicated Representative
  • White-glove Onboarding
1 <div class="flex w-full flex-col items-center bg-white px-4 py-16 dark:bg-gray-900">
2  <div class="mb-12 w-full max-w-4xl text-center">
3    <span class="mb-3 inline-block rounded-full bg-blue-100 px-4 py-1 text-sm font-semibold text-blue-600 dark:bg-blue-900/30 dark:text-blue-300">Flexible Pricing</span>
4    <h2 class="text-4xl font-extrabold text-gray-800 md:text-5xl dark:text-gray-50">Choose Your Perfect Plan</h2>
5    <p class="mt-4 text-lg text-gray-600 md:text-xl dark:text-gray-400">Simple, transparent pricing with no hidden fees. Start with a 14-day free trial.</p>
6
7     <div class="mt-6 flex items-center justify-center gap-4">
8      <span class="text-base font-medium text-gray-700 dark:text-gray-300">Monthly</span>
9      <label class="relative inline-flex cursor-pointer items-center">
10        <input type="checkbox" class="peer sr-only" />

Pricing Table with Icons

A detailed pricing table enhanced with icons for better visual appeal.

Choose Your Plan

Simple, transparent pricing that scales with your needs. No hidden fees.

Starter

Ideal for individuals

$29/month

Features include:

  • 10 GB Secure Storage
  • Basic Usage Analytics
  • Community Forum Access
  • Email Support (48h response)
Most Popular

Business

Perfect for growing teams

$59/month

Everything in Starter, plus:

  • 100 GB Secure Storage
  • Advanced Analytics & Reports
  • Up to 5 Team Members
  • Priority Email & Chat Support
  • Access to Basic API

Ultimate

For large-scale use

$99/month

Everything in Business, plus:

  • Unlimited Storage
  • Dedicated Account Manager
  • Advanced Security Features
  • 24/7 Priority Phone Support
  • Full API Access & Integrations
1<div class="flex w-full flex-col items-center bg-gray-100 px-4 py-16 font-sans sm:px-6 lg:px-8 dark:bg-gray-950">
2  <div class="mb-12 w-full max-w-4xl text-center">
3    <h2 class="text-4xl leading-tight font-extrabold text-gray-900 md:text-5xl dark:text-white">Choose Your Plan</h2>
4    <p class="mx-auto mt-4 max-w-2xl text-base text-gray-600 md:text-lg dark:text-gray-400">Simple, transparent pricing that scales with your needs. No hidden fees.</p>
5  </div>
6
7  <div class="flex w-full max-w-6xl flex-col items-stretch justify-center gap-8 md:flex-row">
8    <div class="flex w-full transform flex-col rounded-xl bg-gradient-to-br from-violet-500 to-blue-500 p-8 text-center text-white shadow-xl transition duration-300 ease-in-out hover:scale-[1.03] md:w-80 lg:w-96 dark:shadow-lg dark:shadow-blue-900/40">
9      <h3 class="mb-1 text-xl font-semibold">Starter</h3>
10      <p class="mb-4 text-sm opacity-80">Ideal for individuals</p>
Newsletter SignupRegister Page