Pricing Plan List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pricing Plan List</title>
    <style>
        /* ==========================================================================
           Styles for Demo Preview Only
           ========================================================================== */
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

/* ==========================================================================
           Pricing Plan Component Styles - Copy from here
           ========================================================================== */
        .pricing-plan-template {
            --pricing-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            --pricing-bg-color: #f8f9fa;
            --card-bg-color: #ffffff;
            --primary-text-color: #212529;
            --secondary-text-color: #6c757d;
            --accent-color: #0d6efd;
            --accent-color-dark: #0a58ca;
            --card-border-color: #dee2e6;
            --recommended-border-color: #0d6efd;
            --card-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
            --card-border-radius: .5rem;

font-family: var(--pricing-font-family);
            color: var(--primary-text-color);
            width: 100%;
            max-width: 1200px;
        }

.pricing-plan-template *,
        .pricing-plan-template *::before,
        .pricing-plan-template *::after {
            box-sizing: border-box;
        }

.pricing-plan-template .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

.pricing-plan-template .pricing-header {
            text-align: center;
            margin-bottom: 3rem;
        }

.pricing-plan-template .pricing-header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

.pricing-plan-template .pricing-header p {
            font-size: 1.125rem;
            color: var(--secondary-text-color);
            max-width: 600px;
            margin: 0 auto;
        }

.pricing-plan-template .pricing-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 2rem;
            margin: 0;
            padding: 0;
        }

.pricing-plan-template .plan {
            background-color: var(--card-bg-color);
            border: 1px solid var(--card-border-color);
            border-radius: var(--card-border-radius);
            box-shadow: var(--card-shadow);
            padding: 2rem;
            text-align: center;
            flex-grow: 1;
            flex-basis: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

@media (min-width: 768px) {
            .pricing-plan-template .plan {
                flex-basis: calc(50% - 1rem);
            }
        }
        
        @media (min-width: 1024px) {
            .pricing-plan-template .plan {
                flex-basis: calc(33.333% - 1.334rem);
            }
        }
        
        .pricing-plan-template .plan h2 {
            font-size: 1.5rem;
            margin: 0 0 0.5rem 0;
            color: var(--primary-text-color);
        }

.pricing-plan-template .plan .price {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .pricing-plan-template .plan .price span {
            font-size: 1rem;
            font-weight: normal;
            color: var(--secondary-text-color);
        }
        
        .pricing-plan-template .plan .description {
            color: var(--secondary-text-color);
            margin-bottom: 2rem;
            min-height: 40px;
        }

.pricing-plan-template .plan .features {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem 0;
            text-align: left;
            flex-grow: 1;
        }
        
        .pricing-plan-template .plan .features li {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .pricing-plan-template .plan .features li svg {
            width: 24px;
            height: 24px;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }
        
        .pricing-plan-template .plan.recommended {
            border: 2px solid var(--recommended-border-color);
            transform: scale(1.05);
            z-index: 1;
        }
        
        .pricing-plan-template .plan.recommended::before {
            content: 'Most Popular';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--accent-color);
            color: white;
            padding: .5rem 2rem;
            font-size: .875rem;
            font-weight: bold;
            width: 100%;
        }

.pricing-plan-template .plan.recommended .plan-header {
            margin-top: 2rem;
        }
        
        .pricing-plan-template .plan .btn {
            display: inline-block;
            background-color: var(--accent-color);
            color: #fff;
            padding: 1rem 1.5rem;
            border-radius: var(--card-border-radius);
            text-decoration: none;
            font-weight: bold;
            border: 1px solid var(--accent-color);
            transition: background-color 0.2s, color 0.2s;
            cursor: pointer;
        }
        
        .pricing-plan-template .plan .btn:hover,
        .pricing-plan-template .plan .btn:focus {
            background-color: var(--accent-color-dark);
            border-color: var(--accent-color-dark);
        }
        
        .pricing-plan-template .plan:not(.recommended) .btn {
            background-color: var(--card-bg-color);
            color: var(--accent-color);
            border: 1px solid var(--card-border-color);
        }
        
        .pricing-plan-template .plan:not(.recommended) .btn:hover,
        .pricing-plan-template .plan:not(.recommended) .btn:focus {
             background-color: #e9ecef;
             color: var(--primary-text-color);
        }
    </style>
</head>
<body>

<div class="pricing-plan-template">

<header class="pricing-header">
        <h1>Find the Perfect Plan</h1>
        <p>Whether you're just starting out or scaling up, we have a plan that fits your needs. Start your free 14-day trial today.</p>
    </header>

<div class="pricing-grid">
        
        
        <article class="plan">
            <div class="plan-header">
                <h2>Sprout Kit</h2>
                <div class="price">$15<span>/month</span></div>
                <p class="description">Ideal for individuals and hobby projects just getting started.</p>
            </div>
            <ul class="features">
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    5 Active Projects
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    1 GB Storage
                </li>
                 <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Email Support
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#a1a1a1" role="img"><title>Not Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
                    Advanced Analytics
                </li>
            </ul>
            <a href="#" class="btn">Choose Plan</a>
        </article>
        
        <article class="plan recommended">
            <div class="plan-header">
                 <h2>Orchard Pack <span class="sr-only">(Recommended)</span></h2>
                <div class="price">$45<span>/month</span></div>
                <p class="description">Best for small teams and growing businesses needing more power.</p>
            </div>
            <ul class="features">
                 <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    25 Active Projects
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    10 GB Storage
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Priority Email Support
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Advanced Analytics
                </li>
            </ul>
            <a href="#" class="btn">Get Started</a>
        </article>

<article class="plan">
             <div class="plan-header">
                <h2>Forest Fleet</h2>
                <div class="price">$99<span>/month</span></div>
                <p class="description">Built for large-scale operations and enterprise-level demands.</p>
            </div>
            <ul class="features">
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Unlimited Projects
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    100 GB Storage
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Dedicated Phone &amp; Email Support
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" role="img"><title>Included</title><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    Advanced Analytics
                </li>
            </ul>
            <a href="#" class="btn">Contact Us</a>
        </article>

</div>
</div>

</body>
</html>