Comparison Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-comparison {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Comparison Card Styles === */
.comparison-card {
    --comparison-radius: 12px;
    --comparison-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --check-color: #16a34a;
    --cross-color: #dc2626;
    
    background-color: #ffffff;
    border-radius: var(--comparison-radius);
    box-shadow: var(--comparison-shadow);
    max-width: 768px;
    width: 100%;
}

.comparison-card-header {
    text-align: center;
    padding: 2rem;
}
.comparison-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.comparison-card-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* Grid for the two columns */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e5e7eb;
}

.comparison-column {
    padding: 1.5rem 2rem;
}
.comparison-column:first-child {
    border-right: 1px solid #e5e7eb;
}

.comparison-item-header {
    margin-bottom: 1.5rem;
    text-align: center;
}
.comparison-item-name {
    font-size: 1.25rem;
    font-weight: 600;
}

.comparison-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.comparison-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.comparison-feature-item svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.comparison-feature-item.is-included svg { color: var(--check-color); }
.comparison-feature-item.is-excluded svg { color: var(--cross-color); }
.comparison-feature-item.is-excluded { color: #9ca3af; }

/* Responsive adjustments */
@media (max-width: 640px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    .comparison-column:first-child {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
}
</style>

<div class="demo-container-comparison">
    <article class="comparison-card">
        <header class="comparison-card-header">
            <h2 class="comparison-card-title">Laptop Model Comparison</h2>
            <p class="comparison-card-subtitle">Choose the right device for your needs.</p>
        </header>
        <div class="comparison-grid">
            
            <div class="comparison-column">
                <header class="comparison-item-header">
                    <h3 class="comparison-item-name">Quantum Laptop</h3>
                </header>
                <ul class="comparison-features-list">
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>16 GB RAM</li>
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>1 TB NVMe SSD</li>
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>Backlit Keyboard</li>
                    <li class="comparison-feature-item is-excluded"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg>4K Touchscreen Display</li>
                </ul>
            </div>

<div class="comparison-column">
                <header class="comparison-item-header">
                    <h3 class="comparison-item-name">Stellar Notebook</h3>
                </header>
                <ul class="comparison-features-list">
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>32 GB RAM</li>
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>2 TB NVMe SSD</li>
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>Backlit Keyboard</li>
                    <li class="comparison-feature-item is-included"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>4K Touchscreen Display</li>
                </ul>
            </div>
        </div>
    </article>
</div>