Page

Pricing Pages

Free, copy-pasteable Tailwind CSS Pricing Pages template page. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Minimal Pricing Section Tabbed Pricing Section Grid Pricing Section Split Pricing Section

AI NewsletterRead →

How Machines Think

Sponsor Business Wish (500+ Devs)Claim this spot →

Pricing pages are critical conversion points. They require absolute clarity, extreme minimalism, and intuitive feature differentiation. These Tailwind CSS pricing page components feature ultra-clean flat layouts, zero shadows, perfectly balanced typography, and sophisticated interaction models that emulate top-tier native Apple applications.

These layouts fit perfectly within Pages or can be utilized as standalone modules.

Minimal Pricing Section

A clean, 3-card layout with high-contrast flat surfaces and ultra-thin structural borders.

Preview

import React from "react";
import { Check, ArrowRight, ArrowUpRight, Sparkles } from "lucide-react";

export const MinimalPricingSection: React.FC = () => {
  return (
    <section className="py-24 px-4 bg-white dark:bg-neutral-950">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-16 max-w-2xl mx-auto">
          <h2 className="text-4xl sm:text-5xl md:text-6xl font-medium tracking-tight text-neutral-900 dark:text-white mb-4">
            Simple, predictable pricing.
          </h2>
          <p className="text-base sm:text-lg text-neutral-500 dark:text-neutral-400 font-normal">
            No hidden fees. Upgrade, downgrade, or cancel at any time.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
          <div className="flex flex-col p-8 sm:p-9 rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
            <div className="flex justify-between items-start mb-4">
              <div>
                <h3 className="text-lg font-medium text-neutral-900 dark:text-white">Starter</h3>
                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">For creators & side projects</p>
              </div>
            </div>
            <div className="flex items-baseline gap-1 my-6">
              <span className="text-5xl sm:text-6xl font-semibold tracking-tight text-neutral-900 dark:text-white">$0</span>
              <span className="text-xs text-neutral-500 dark:text-neutral-400 font-mono uppercase tracking-wider">/ free forever</span>
            </div>
            <button className="w-full py-3.5 px-4 bg-neutral-200/70 dark:bg-neutral-800 hover:bg-neutral-900 hover:text-white dark:hover:bg-white dark:hover:text-neutral-950 text-neutral-900 dark:text-white rounded-full font-medium text-sm transition-all duration-200 mb-8 flex items-center justify-center gap-1.5">
              <span>Get Started</span>
              <ArrowRight className="w-4 h-4" />
            </button>
            <div className="flex flex-col gap-3.5 mt-auto pt-6 border-t border-neutral-200/80 dark:border-neutral-800/80">
              {['Up to 3 active projects', 'Basic real-time analytics', 'Community forum support', '1 team member workspace'].map((feature) => (
                <div key={feature} className="flex items-center gap-3">
                  <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-neutral-200/80 dark:bg-neutral-800 text-neutral-900 dark:text-white">
                    <Check className="h-2.5 w-2.5" />
                  </div>
                  <span className="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">{feature}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="flex flex-col p-8 sm:p-9 rounded-3xl bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 border border-neutral-800 dark:border-neutral-200 relative hover:border-neutral-700 dark:hover:border-neutral-300 transition-all duration-300">
            <div className="flex justify-between items-center mb-4">
              <div>
                <h3 className="text-lg font-medium text-white dark:text-neutral-950">Pro</h3>
                <p className="text-xs text-neutral-400 dark:text-neutral-600 mt-1">For growing teams & startups</p>
              </div>
              <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-neutral-800 dark:bg-neutral-100 text-[11px] font-mono tracking-wider uppercase text-neutral-200 dark:text-neutral-800 border border-neutral-700 dark:border-neutral-200">
                <Sparkles className="w-3 h-3 text-amber-400 dark:text-amber-600" />
                Popular
              </span>
            </div>
            <div className="flex items-baseline gap-1.5 my-6">
              <span className="text-5xl sm:text-6xl font-semibold tracking-tight text-white dark:text-neutral-950">$29</span>
              <span className="text-xs text-neutral-400 dark:text-neutral-600 font-mono uppercase tracking-wider">/ per month</span>
            </div>
            <button className="w-full py-3.5 px-4 bg-white dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-950 dark:text-white rounded-full font-medium text-sm transition-all duration-200 mb-8 flex items-center justify-center gap-1.5">
              <span>Start 14-Day Free Trial</span>
              <ArrowRight className="w-4 h-4" />
            </button>
            <div className="flex flex-col gap-3.5 mt-auto pt-6 border-t border-neutral-800 dark:border-neutral-200">
              {['Unlimited active projects', 'Advanced telemetry & insights', '1-hour dedicated support response', 'Up to 10 team seats', 'Custom domain mapping'].map((feature) => (
                <div key={feature} className="flex items-center gap-3">
                  <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-neutral-800 dark:bg-neutral-100 text-white dark:text-neutral-950">
                    <Check className="h-2.5 w-2.5" />
                  </div>
                  <span className="text-xs sm:text-sm text-neutral-300 dark:text-neutral-700 font-medium">{feature}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="flex flex-col p-8 sm:p-9 rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
            <div className="flex justify-between items-start mb-4">
              <div>
                <h3 className="text-lg font-medium text-neutral-900 dark:text-white">Enterprise</h3>
                <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">For scale & high performance</p>
              </div>
            </div>
            <div className="flex items-baseline gap-1 my-6">
              <span className="text-5xl sm:text-6xl font-semibold tracking-tight text-neutral-900 dark:text-white">Custom</span>
            </div>
            <button className="w-full py-3.5 px-4 bg-neutral-200/70 dark:bg-neutral-800 hover:bg-neutral-900 hover:text-white dark:hover:bg-white dark:hover:text-neutral-950 text-neutral-900 dark:text-white rounded-full font-medium text-sm transition-all duration-200 mb-8 flex items-center justify-center gap-1.5">
              <span>Contact Sales</span>
              <ArrowUpRight className="w-4 h-4" />
            </button>
            <div className="flex flex-col gap-3.5 mt-auto pt-6 border-t border-neutral-200/80 dark:border-neutral-800/80">
              {['Everything included in Pro', 'Custom SLA & 99.99% uptime', '24/7 dedicated telephone line', 'Unlimited workspace seats', 'Dedicated solutions architect'].map((feature) => (
                <div key={feature} className="flex items-center gap-3">
                  <div className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-neutral-200/80 dark:bg-neutral-800 text-neutral-900 dark:text-white">
                    <Check className="h-2.5 w-2.5" />
                  </div>
                  <span className="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">{feature}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Tabbed Pricing Section

Features a flat pill segmented toggle for Monthly/Annually intervals. It highlights the premium tier using a clean high-contrast flat layout.

Preview

import React, { useState } from "react";
import { Check, Zap, Crown } from "lucide-react";

export const TabbedPricingSection: React.FC = () => {
  const [isAnnual, setIsAnnual] = useState(false);

  return (
    <section className="py-24 px-4 bg-white dark:bg-neutral-950">
      <div className="max-w-5xl mx-auto">
        <div className="flex flex-col items-center mb-16">
          <h2 className="text-4xl sm:text-5xl font-medium tracking-tight text-neutral-900 dark:text-white mb-6 text-center">
            Pricing built for every stage.
          </h2>
          
          <div className="flex items-center p-1 bg-neutral-100 dark:bg-neutral-900 rounded-full border border-neutral-200 dark:border-neutral-800">
            <button
              onClick={() => setIsAnnual(false)}
              className={`px-6 py-2.5 rounded-full text-xs font-medium transition-all duration-200 ${!isAnnual ? 'bg-neutral-900 dark:bg-white text-white dark:text-neutral-950' : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'}`}
            >
              Monthly Billing
            </button>
            <button
              onClick={() => setIsAnnual(true)}
              className={`flex items-center gap-2 px-6 py-2.5 rounded-full text-xs font-medium transition-all duration-200 ${isAnnual ? 'bg-neutral-900 dark:bg-white text-white dark:text-neutral-950' : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'}`}
            >
              <span>Annual Billing</span>
              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
                <span className="w-1 h-1 rounded-full bg-emerald-500" />
                Save 20%
              </span>
            </button>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div className="p-8 sm:p-10 rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200/80 dark:border-neutral-800 flex flex-col justify-between hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
            <div>
              <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-3.5">
                  <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-neutral-200/80 dark:bg-neutral-800 text-neutral-900 dark:text-white">
                    <Zap className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium text-neutral-900 dark:text-white">Basic Plan</h3>
                    <p className="text-xs text-neutral-500 dark:text-neutral-400">Essential building blocks</p>
                  </div>
                </div>
              </div>
              
              <div className="mb-8">
                <div className="flex items-baseline gap-1">
                  <span className="text-5xl sm:text-6xl font-semibold tracking-tight text-neutral-900 dark:text-white transition-all">
                    ${isAnnual ? '15' : '19'}
                  </span>
                  <span className="text-sm text-neutral-500 dark:text-neutral-400 font-mono">/month</span>
                </div>
                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
                  {isAnnual ? 'Billed annually ($180/yr)' : 'Billed monthly'}
                </p>
              </div>

              <ul className="space-y-3.5 mb-8 pt-6 border-t border-neutral-200/80 dark:border-neutral-800/80">
                {['5 Active Team Projects', '10GB Encrypted Storage', 'Standard Email Support', 'Community Forum Access', 'Automated Daily Backups'].map((item) => (
                  <li key={item} className="flex items-center gap-3">
                    <Check className="h-4 w-4 text-neutral-400 dark:text-neutral-500 shrink-0" />
                    <span className="text-xs sm:text-sm text-neutral-600 dark:text-neutral-300">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <button className="w-full py-3.5 rounded-full bg-neutral-900 dark:bg-white text-white dark:text-neutral-950 font-medium text-sm hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-all duration-200">
              Select Basic Plan
            </button>
          </div>

          <div className="p-8 sm:p-10 rounded-3xl bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-white flex flex-col justify-between relative">
            <div>
              <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-3.5">
                  <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-neutral-900 dark:bg-white text-white dark:text-neutral-950">
                    <Crown className="h-5 w-5" />
                  </div>
                  <div>
                    <h3 className="text-lg font-medium text-neutral-900 dark:text-white">Premium Plan</h3>
                    <p className="text-xs text-neutral-500 dark:text-neutral-400">Full power & scalability</p>
                  </div>
                </div>
                <span className="px-3 py-1 rounded-full text-[11px] font-mono tracking-wider uppercase bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-white border border-neutral-200 dark:border-neutral-800">
                  Recommended
                </span>
              </div>
              
              <div className="mb-8">
                <div className="flex items-baseline gap-1">
                  <span className="text-5xl sm:text-6xl font-semibold tracking-tight text-neutral-900 dark:text-white transition-all">
                    ${isAnnual ? '79' : '99'}
                  </span>
                  <span className="text-sm text-neutral-500 dark:text-neutral-400 font-mono">/month</span>
                </div>
                <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-1">
                  {isAnnual ? 'Billed annually ($948/yr)' : 'Billed monthly'}
                </p>
              </div>

              <ul className="space-y-3.5 mb-8 pt-6 border-t border-neutral-200/80 dark:border-neutral-800/80">
                {['Unlimited Active Projects', '500GB Encrypted Storage', 'Priority 24/7 Phone & Chat', 'Custom API & Webhook Integrations', 'Real-time Analytics Dashboard'].map((item) => (
                  <li key={item} className="flex items-center gap-3">
                    <Check className="h-4 w-4 text-neutral-900 dark:text-white shrink-0" />
                    <span className="text-xs sm:text-sm text-neutral-900 dark:text-white font-medium">{item}</span>
                  </li>
                ))}
              </ul>
            </div>

            <button className="w-full py-3.5 rounded-full bg-neutral-900 dark:bg-white text-white dark:text-neutral-950 font-medium text-sm hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-all duration-200">
              Select Premium Plan
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

Grid Pricing Section

A Bento-grid inspired layout. The Business Team tier spans wider, utilizing a dark theme aesthetic for stark, premium flat contrast.

Preview

import React from "react";
import { Check, ArrowRight, ShieldCheck } from "lucide-react";

export const GridPricingSection: React.FC = () => {
  return (
    <section className="py-24 px-4 bg-white dark:bg-neutral-950">
      <div className="max-w-6xl mx-auto">
        <div className="mb-12 max-w-xl">
          <h2 className="text-4xl sm:text-5xl font-medium tracking-tight text-neutral-900 dark:text-white">
            Tailored solutions for teams.
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          <div className="col-span-1 p-8 sm:p-9 rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200 dark:border-neutral-800 flex flex-col justify-between hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
            <div>
              <div className="flex justify-between items-center mb-2">
                <h3 className="text-lg font-medium text-neutral-900 dark:text-white">Developer</h3>
                <span className="text-[10px] font-mono uppercase tracking-wider text-neutral-400">Tier 01</span>
              </div>
              <div className="flex items-baseline gap-1 my-4">
                <span className="text-4xl sm:text-5xl font-semibold tracking-tight text-neutral-900 dark:text-white">$0</span>
                <span className="text-xs text-neutral-500 font-mono">/ free</span>
              </div>
              <p className="text-xs sm:text-sm text-neutral-500 dark:text-neutral-400 mb-6">
                Start building immediately with our production API core.
              </p>
              <ul className="space-y-3 mb-8 pt-4 border-t border-neutral-200/80 dark:border-neutral-800">
                {['1 Developer Seat', '10 API Req / sec', 'Community Discord', 'Standard Bandwidth'].map((item) => (
                  <li key={item} className="flex items-center text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
                    <ArrowRight className="h-3.5 w-3.5 mr-2.5 text-neutral-400 dark:text-neutral-500 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
            <button className="w-full py-3 rounded-full bg-neutral-200/70 dark:bg-neutral-800 hover:bg-neutral-900 hover:text-white dark:hover:bg-white dark:hover:text-neutral-950 text-neutral-900 dark:text-white text-sm font-medium transition-all duration-200">
              Deploy Free Tier
            </button>
          </div>

          <div className="col-span-1 md:col-span-2 p-8 sm:p-10 rounded-3xl bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 border border-neutral-800 dark:border-neutral-200 flex flex-col sm:flex-row gap-8 hover:border-neutral-700 dark:hover:border-neutral-300 transition-all duration-300">
            <div className="flex-1 flex flex-col justify-between">
              <div>
                <div className="flex items-center justify-between mb-4">
                  <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-mono tracking-wider uppercase bg-neutral-800 dark:bg-neutral-100 text-neutral-300 dark:text-neutral-700 border border-neutral-700 dark:border-neutral-200">
                    <ShieldCheck className="w-3 h-3 text-emerald-400 dark:text-emerald-600" />
                    Business Team
                  </span>
                  <span className="text-[10px] font-mono uppercase tracking-wider text-neutral-400 dark:text-neutral-500">Tier 02</span>
                </div>
                <h3 className="text-2xl sm:text-3xl font-medium mb-2">Team Workspace</h3>
                <p className="text-neutral-400 dark:text-neutral-600 text-xs sm:text-sm mb-6 max-w-xs">
                  Scale your production app with multi-region routing, team RBAC, and dedicated support.
                </p>
              </div>
              <div className="flex items-baseline gap-1.5 mt-4">
                <span className="text-5xl sm:text-6xl font-semibold tracking-tight">$49</span>
                <span className="text-xs text-neutral-400 dark:text-neutral-600 font-mono uppercase tracking-wider">/ user / mo</span>
              </div>
            </div>

            <div className="flex flex-col flex-1 justify-between border-t sm:border-t-0 sm:border-l border-neutral-800 dark:border-neutral-200 pt-6 sm:pt-0 sm:pl-8">
              <ul className="space-y-3.5 mb-8">
                {[
                  '10,000 API Req / sec',
                  'Granular Role-Based Permissions',
                  'Enterprise SSO & SAML 2.0',
                  '99.9% Uptime Guarantee',
                  'Personalized Onboarding Support',
                ].map((item) => (
                  <li key={item} className="flex items-center text-xs sm:text-sm font-medium text-neutral-200 dark:text-neutral-800">
                    <Check className="h-4 w-4 mr-3 text-white dark:text-neutral-950 shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
              <button className="w-full py-3.5 rounded-full bg-white text-neutral-950 hover:bg-neutral-100 dark:bg-neutral-950 dark:text-white dark:hover:bg-neutral-900 text-sm font-medium transition-all duration-200 flex items-center justify-center gap-1.5">
                <span>Start 14-Day Free Trial</span>
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Split Pricing Section

A split-screen layout with sticky minimalist typography describing the strategy on the left, flat cards on the right.

Preview

import React from "react";
import { Check, X, Building2 } from "lucide-react";

export const SplitPricingSection: React.FC = () => {
  return (
    <section className="py-24 px-4 bg-white dark:bg-neutral-950">
      <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-12 lg:gap-16">
        <div className="lg:w-1/3">
          <div className="sticky top-28">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-white border border-neutral-200 dark:border-neutral-800 text-[11px] font-mono tracking-wider uppercase mb-6">
              <Building2 className="w-3.5 h-3.5" />
              Enterprise Tier
            </div>
            <h2 className="text-4xl sm:text-5xl font-medium tracking-tight text-neutral-900 dark:text-white mb-4">
              Right-sized for your ambition.
            </h2>
            <p className="text-neutral-500 dark:text-neutral-400 text-sm sm:text-base leading-relaxed mb-8">
              Whether you are experimenting or scaling production architecture, select the exact capacity required.
            </p>

            <div className="p-4 rounded-2xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200 dark:border-neutral-800 flex items-center gap-3.5 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
              <div className="p-2.5 bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700 shrink-0">
                <SearchIcon className="w-4 h-4 text-neutral-700 dark:text-neutral-300" />
              </div>
              <div>
                <h4 className="font-medium text-neutral-900 dark:text-white text-xs sm:text-sm">Need a custom contract?</h4>
                <a href="#" className="text-xs text-neutral-500 hover:text-neutral-900 dark:hover:text-white underline underline-offset-4 transition-colors">
                  Speak with our engineering team
                </a>
              </div>
            </div>
          </div>
        </div>

        <div className="lg:w-2/3 grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div className="flex flex-col p-8 sm:p-9 rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
            <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-1">Hobby Tier</h3>
            <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-6">For indie developers & prototypes</p>
            <div className="mb-8 pb-6 border-b border-neutral-200/80 dark:border-neutral-800">
              <span className="text-4xl sm:text-5xl font-semibold tracking-tight text-neutral-900 dark:text-white">$0</span>
              <span className="text-xs text-neutral-500 font-mono ml-1">/ forever</span>
            </div>
            <ul className="space-y-3.5 mb-8 flex-1">
              {['Single developer seat', '1GB Encrypted Storage', 'Community Discord Support'].map(feature => (
                <li key={feature} className="flex items-center text-xs sm:text-sm text-neutral-600 dark:text-neutral-400">
                  <Check className="w-4 h-4 mr-3 text-neutral-400 dark:text-neutral-500 shrink-0" />
                  {feature}
                </li>
              ))}
              <li className="flex items-center text-xs sm:text-sm text-neutral-400 dark:text-neutral-600 line-through">
                <X className="w-4 h-4 mr-3 shrink-0" /> Dedicated SLA Support
              </li>
            </ul>
            <button className="w-full py-3 rounded-full border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white text-sm font-medium hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
              Get Started Free
            </button>
          </div>

          <div className="flex flex-col p-8 sm:p-9 rounded-3xl bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-white relative">
            <div className="inline-flex self-start px-3 py-1 rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 text-[11px] font-mono tracking-wider uppercase mb-4">
              Professional
            </div>
            <h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-1">Pro Tier</h3>
            <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-6">For scaling startups & apps</p>
            <div className="mb-8 pb-6 border-b border-neutral-200 dark:border-neutral-800">
              <span className="text-4xl sm:text-5xl font-semibold tracking-tight text-neutral-900 dark:text-white">$15</span>
              <span className="text-xs text-neutral-500 dark:text-neutral-400 font-mono ml-1">/ month</span>
            </div>
            <ul className="space-y-3.5 mb-8 flex-1">
              {['All Hobby features included', 'Unlimited team members', '100GB High-speed Storage', '24/7 Priority Ticket Support', 'Custom domain & SSL certificates'].map(feature => (
                <li key={feature} className="flex items-center text-xs sm:text-sm text-neutral-900 dark:text-white font-medium">
                  <Check className="w-4 h-4 mr-3 text-neutral-900 dark:text-white shrink-0" />
                  {feature}
                </li>
              ))}
            </ul>
            <button className="w-full py-3 rounded-full bg-neutral-900 dark:bg-white text-white dark:text-neutral-950 text-sm font-medium hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors mt-auto">
              Subscribe Now
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

function SearchIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="11" cy="11" r="8" />
      <path d="m21 21-4.3-4.3" />
    </svg>
  );
}

Blog List

Text Reveal