Responsive Pricing Table AI Prompt Result

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Pricing Table</title>
    <style>
        :root {
            --primary-color: #007bff;
            --accent-color: #ffc107;
            --background-color: #f8f9fa;
            --text-color: #333;
            --card-background: #fff;
            --border-color: #dee2e6;
            --popular-color: #28a745;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--background-color);
            margin: 0;
            padding: 2rem;
            color: var(--text-color);
        }

.pricing-table {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.pricing-plan {
            background-color: var(--card-background);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2.5rem;
            text-align: center;
            flex: 1;
            min-width: 280px;
            max-width: 360px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden; /* For the ribbon */
        }

.pricing-plan:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

.pricing-plan--popular {
            border-color: var(--popular-color);
            transform: scale(1.05);
            z-index: 10;
        }

.pricing-plan--popular:hover {
            transform: scale(1.05) translateY(-10px);
        }

.popular-ribbon {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 150px;
            height: 150px;
            overflow: hidden;
        }

.popular-ribbon::before,
        .popular-ribbon::after {
            position: absolute;
            z-index: -1;
            content: '';
            display: block;
            border: 5px solid #1e7e34;
        }

.popular-ribbon span {
            position: absolute;
            display: block;
            width: 225px;
            padding: 15px 0;
            background-color: var(--popular-color);
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
            color: #fff;
            font-size: 0.9rem;
            font-weight: bold;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            text-transform: uppercase;
            text-align: center;
            left: -25px;
            top: 30px;
            transform: rotate(45deg);
        }

.plan-name {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

.plan-price {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
        }

.plan-price span {
            font-size: 1rem;
            font-weight: 400;
            color: #6c757d;
        }

.feature-list {
            list-style: none;
            padding: 0;
            margin: 0 0 2.5rem 0;
            text-align: left;
        }

.feature-list li {
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

.feature-list li::before {
            content: '\2713'; /* Checkmark character */
            color: var(--popular-color);
            font-weight: bold;
            margin-right: 0.75rem;
            font-size: 1.2rem;
        }

.cta-button {
            display: inline-block;
            background-color: var(--primary-color);
            color: #fff;
            padding: 0.75rem 2rem;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.cta-button:hover, .cta-button:focus {
            background-color: #0056b3;
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }

.pricing-plan--popular .cta-button {
            background-color: var(--popular-color);
        }

.pricing-plan--popular .cta-button:hover, .pricing-plan--popular .cta-button:focus {
            background-color: #218838;
            outline: 2px solid var(--popular-color);
        }

/* Responsive Design */
        @media (max-width: 992px) {
            .pricing-plan--popular {
                transform: scale(1); /* Reset scaling for tablet to prevent overlap issues */
            }
        }

@media (max-width: 767px) {
            .pricing-table {
                flex-direction: column;
                gap: 2.5rem;
            }

.pricing-plan {
                width: 100%;
                max-width: 400px; /* Or adjust as you see fit */
                flex: none;
            }

.pricing-plan--popular {
                transform: scale(1.05); /* Re-apply scaling for vertical layout */
            }
        }
    </style>
</head>
<body>

<div class="pricing-plan" role="listitem">
            <h2 class="plan-name">Basic</h2>
            <p class="plan-price">$10 <span>/ month</span></p>
            <ul class="feature-list" role="list">
                <li role="listitem">10GB Storage</li>
                <li role="listitem">1 User</li>
                <li role="listitem">Basic Support</li>
                <li role="listitem">Community Access</li>
            </ul>
            <a href="#" class="cta-button">Choose Plan</a>
        </div>

<div class="pricing-plan pricing-plan--popular" role="listitem" aria-label="Most Popular">
            <div class="popular-ribbon"><span>Most Popular</span></div>
            <h2 class="plan-name">Pro</h2>
            <p class="plan-price">$25 <span>/ month</span></p>
            <ul class="feature-list" role="list">
                <li role="listitem">50GB Storage</li>
                <li role="listitem">5 Users</li>
                <li role="listitem">Priority Support</li>
                <li role="listitem">Advanced Analytics</li>
                <li role="listitem">API Access</li>
            </ul>
            <a href="#" class="cta-button">Choose Plan</a>
        </div>

<div class="pricing-plan" role="listitem">
            <h2 class="plan-name">Enterprise</h2>
            <p class="plan-price">$50 <span>/ month</span></p>
            <ul class="feature-list" role="list">
                <li role="listitem">Unlimited Storage</li>
                <li role="listitem">Unlimited Users</li>
                <li role="listitem">24/7 Dedicated Support</li>
                <li role="listitem">SSO Integration</li>
            </ul>
            <a href="#" class="cta-button">Choose Plan</a>
        </div>

</div>

</body>
</html>