Animated Pricing Tables

6 Beautiful, responsive pricing tables with hover effects and full customization

Customize Pricing Tables

Primary Color:

Secondary Color:

Font Family:

Animation Speed:

Table 1: Classic Design

Basic

$ 9 /month

✓ 5 Projects
✓ 10GB Storage
✓ Email Support
✗ Priority Support
✗ Custom Integrations

Pro

$ 29 /month

✓ 25 Projects
✓ 100GB Storage
✓ Priority Support
✓ Analytics Dashboard
✗ Custom Integrations

Enterprise

$ 99 /month

✓ Unlimited Projects
✓ 1TB Storage
✓ 24/7 Support
✓ Advanced Analytics
✓ Custom Integrations

Table 2: Modern Cards

📦

Starter

$ 15 /month

Perfect for small teams

✓ 3 Team Members
✓ 20GB Storage
✓ Basic Templates
✗ Advanced Features
✗ API Access

Recommended

🚀

Professional

$ 49 /month

For growing businesses

✓ 15 Team Members
✓ 200GB Storage
✓ Premium Templates
✓ Advanced Analytics
✗ API Access

🏢

Enterprise

$ 149 /month

For large organizations

✓ Unlimited Members
✓ Unlimited Storage
✓ Custom Templates
✓ Full Analytics Suite
✓ Full API Access

Table 3: Gradient Style

Basic

$ 12 /month

✓ 1 Website
✓ 10GB Bandwidth
✓ SSL Certificate
✗ Priority Support
✗ Advanced Security

Best Value

Professional

$ 39 /month

✓ 5 Websites
✓ 100GB Bandwidth
✓ SSL Certificate
✓ Priority Support
✗ Advanced Security

Enterprise

$ 89 /month

✓ Unlimited Websites
✓ Unlimited Bandwidth
✓ SSL Certificate
✓ 24/7 Support
✓ Advanced Security

Table 4: Minimalist Design

Essential

$8 per month

5 Projects

Basic Support

1GB Storage

Popular

Professional

$24 per month

25 Projects

Priority Support

10GB Storage

Advanced Analytics

Enterprise

$79 per month

Unlimited Projects

24/7 Support

100GB Storage

Custom Integrations

White-label Option

Table 5: Toggle Style (Monthly/Yearly)

Monthly Yearly Save 20%

Starter

$ 19 /month

Billed yearly: $180

✓ 10 Users
✓ 50GB Storage
✓ Basic Reports
✗ Advanced Features
✗ API Access

Best Deal

Growth

$ 49 /month

Billed yearly: $468

✓ 50 Users
✓ 500GB Storage
✓ Advanced Reports
✓ Integrations
✗ API Access

Scale

$ 99 /month

Billed yearly: $948

✓ Unlimited Users
✓ Unlimited Storage
✓ Custom Reports
✓ All Integrations
✓ Full API Access

Table 6: Dashboard Style

5 Projects

10GB Storage

Freelancer

$ 14 /month

📊 Basic Analytics

📧 Email Support

🔒 SSL Security

Agency

$ 59 /month

📈 Advanced Analytics

💬 Priority Support

🔐 Enhanced Security

🎨 Custom Branding

∞ Projects

1TB Storage

Enterprise

$ 149 /month

🚀 Full Analytics Suite

📞 24/7 Phone Support

🛡️ Enterprise Security

🔧 Custom Integration

Documentation

Installation & Usage

Method 1: Direct Download

Click the "Download HTML" button on any pricing tier to get a standalone HTML/CSS snippet.

Method 2: API Integration

// Include the pricing table API
<script src="https://api.yoursite.com/pricing-tables.js"></script>

// Initialize a pricing table
<div id="pricing-container"></div>
<script>
PricingTables.render({
    container: '#pricing-container',
    table: 1, // Table number (1-6)
    theme: 'default',
    customization: {
        primaryColor: '#000000',
        secondaryColor: '#ffffff',
        fontFamily: 'system-ui'
    }
});
</script>

Method 3: CSS Framework Integration

/* Include the CSS file */
@import url('pricing-tables.css');

/* Use the HTML structure */
<div class="pricing-container" data-table="1">
    <div class="pricing-card basic">
        <!-- Card content -->
    </div>
</div>

Pricing Table Descriptions

Table 1: Classic Design

Traditional pricing table with clean lines and standard layout. Perfect for SaaS applications and business websites.

Table 2: Modern Cards

Card-based design with icons and descriptions. Ideal for modern web applications and mobile-first designs.

Table 3: Gradient Style

Eye-catching gradient backgrounds with smooth transitions. Great for creative agencies and portfolio sites.

Table 4: Minimalist Design

Clean, minimal approach focusing on content over decoration. Perfect for professional services and consultancies.

Table 5: Toggle Style

Interactive monthly/yearly toggle with dynamic pricing updates. Excellent for subscription-based services.

Table 6: Dashboard Style

Feature-rich design with statistics and grid layout. Ideal for analytics tools and enterprise software.

Customization Options

Colors: Primary and secondary color schemes
Typography: Font family selection
Animation: Hover effect speed controls
Layout: Responsive breakpoint adjustments
Content: Easy text and pricing modifications

API Integration

GET /api/pricing-tables

Retrieve all available pricing tables with metadata

GET /api/pricing-tables/{id}

Get specific pricing table HTML/CSS

POST /api/pricing-tables/customize

Generate customized pricing table with provided parameters