Price Comparison Table

This example shows how to create and capture a price comparison table, perfect for marketing materials, product pages, or feature comparisons.

HTML Content

<div class="pricing-table">
    <div class="plan-header">
        <div class="plan-cell"></div>
        <div class="plan-cell">Basic</div>
        <div class="plan-cell">Pro</div>
        <div class="plan-cell">Enterprise</div>
    </div>
    
    <div class="price-row">
        <div class="plan-cell">Monthly Price</div>
        <div class="plan-cell">$9.99</div>
        <div class="plan-cell highlight">$19.99</div>
        <div class="plan-cell">$49.99</div>
    </div>
    
    <div class="feature-row">
        <div class="plan-cell">API Calls</div>
        <div class="plan-cell">1,000</div>
        <div class="plan-cell">10,000</div>
        <div class="plan-cell">Unlimited</div>
    </div>
    
    <div class="feature-row">
        <div class="plan-cell">Custom Domain</div>
        <div class="plan-cell">
            <span class="no">✕</span>
        </div>
        <div class="plan-cell">
            <span class="yes">✓</span>
        </div>
        <div class="plan-cell">
            <span class="yes">✓</span>
        </div>
    </div>
    
    <div class="feature-row">
        <div class="plan-cell">Team Members</div>
        <div class="plan-cell">1</div>
        <div class="plan-cell">5</div>
        <div class="plan-cell">Unlimited</div>
    </div>
    
    <div class="feature-row">
        <div class="plan-cell">Priority Support</div>
        <div class="plan-cell">
            <span class="no">✕</span>
        </div>
        <div class="plan-cell">
            <span class="yes">✓</span>
        </div>
        <div class="plan-cell">
            <span class="yes">✓</span>
        </div>
    </div>
    
    <div class="feature-row">
        <div class="plan-cell">SLA</div>
        <div class="plan-cell">-</div>
        <div class="plan-cell">99.9%</div>
        <div class="plan-cell">99.99%</div>
    </div>
</div>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pricing-table {
    width: 800px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.plan-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.plan-header .plan-cell {
    padding: 24px;
    font-weight: 600;
    font-size: 18px;
    color: #1e293b;
    text-align: center;
}

.plan-header .plan-cell:first-child {
    text-align: left;
}

.price-row, .feature-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    border-bottom: 1px solid #e2e8f0;
}

.plan-cell {
    padding: 16px 24px;
    color: #475569;
}

.price-row .plan-cell {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
}

.price-row .plan-cell:first-child {
    font-size: 16px;
    font-weight: normal;
    color: #475569;
}

.highlight {
    background: #eff6ff;
    position: relative;
}

.highlight::after {
    content: "Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.yes {
    color: #22c55e;
    font-size: 20px;
}

.no {
    color: #ef4444;
    font-size: 20px;
}

.plan-cell:not(:first-child) {
    text-align: center;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"pricing-table\"><div class=\"plan-header\"><div class=\"plan-cell\"></div><div class=\"plan-cell\">Basic</div><div class=\"plan-cell\">Pro</div><div class=\"plan-cell\">Enterprise</div></div><div class=\"price-row\"><div class=\"plan-cell\">Monthly Price</div><div class=\"plan-cell\">$9.99</div><div class=\"plan-cell highlight\">$19.99</div><div class=\"plan-cell\">$49.99</div></div><div class=\"feature-row\"><div class=\"plan-cell\">API Calls</div><div class=\"plan-cell\">1,000</div><div class=\"plan-cell\">10,000</div><div class=\"plan-cell\">Unlimited</div></div><div class=\"feature-row\"><div class=\"plan-cell\">Custom Domain</div><div class=\"plan-cell\"><span class=\"no\">✕</span></div><div class=\"plan-cell\"><span class=\"yes\">✓</span></div><div class=\"plan-cell\"><span class=\"yes\">✓</span></div></div><div class=\"feature-row\"><div class=\"plan-cell\">Team Members</div><div class=\"plan-cell\">1</div><div class=\"plan-cell\">5</div><div class=\"plan-cell\">Unlimited</div></div><div class=\"feature-row\"><div class=\"plan-cell\">Priority Support</div><div class=\"plan-cell\"><span class=\"no\">✕</span></div><div class=\"plan-cell\"><span class=\"yes\">✓</span></div><div class=\"plan-cell\"><span class=\"yes\">✓</span></div></div><div class=\"feature-row\"><div class=\"plan-cell\">SLA</div><div class=\"plan-cell\">-</div><div class=\"plan-cell\">99.9%</div><div class=\"plan-cell\">99.99%</div></div></div>",
    "width": 848,
    "height": 475,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.pricing-table{width:800px;background:white;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,0.08);overflow:hidden}.plan-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;background:#f8fafc;border-bottom:2px solid #e2e8f0}.plan-header .plan-cell{padding:24px;font-weight:600;font-size:18px;color:#1e293b;text-align:center}.plan-header .plan-cell:first-child{text-align:left}.price-row,.feature-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;border-bottom:1px solid #e2e8f0}.plan-cell{padding:16px 24px;color:#475569}.price-row .plan-cell{font-size:24px;font-weight:600;color:#1e293b}.price-row .plan-cell:first-child{font-size:16px;font-weight:normal;color:#475569}.highlight{background:#eff6ff;position:relative}.highlight::after{content:\"Popular\";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#3b82f6;color:white;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500}.yes{color:#22c55e;font-size:20px}.no{color:#ef4444;font-size:20px}.plan-cell:not(:first-child){text-align:center}"
}

How it Works

1. CSS Grid for perfect column alignment
2. Responsive design with proper spacing
3. Highlighted “Popular” plan with badge
4. Clear visual indicators for feature availability
5. Professional typography and color scheme