Pricing Table Simple

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

.pricing-table-simple caption {
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 20px;
    color: #333;
}

.pricing-table-simple th,
.pricing-table-simple td {
    border: 1px solid #e0e0e0;
    padding: 15px;
}

/* Feature column (first header in each row) */
.pricing-table-simple .feature-name {
    text-align: left;
    font-weight: bold;
}

/* Plan names and prices in the header */
.pricing-table-simple thead th {
    background-color: #f8f9fa;
    vertical-align: bottom;
}
.pricing-table-simple .plan-name {
    font-size: 1.2rem;
    font-weight: 600;
}
.pricing-table-simple .plan-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 5px 0;
}
.pricing-table-simple .plan-period {
    font-size: 0.8rem;
    color: #666;
}

/* Checkmark styling */
.pricing-table-simple .check {
    color: #27ae60;
    font-size: 1.5rem;
    font-weight: bold;
}
</style>

<div class="pricing-table-container">
    <table class="pricing-table-simple">
        <caption>Our Service Plans</caption>
        <thead>
            <tr>
                <th scope="col" class="feature-name">Features</th>
                <th scope="col">
                    <div class="plan-name">Bronze</div>
                    <div class="plan-price">$19</div>
                    <div class="plan-period">per month</div>
                </th>
                <th scope="col">
                    <div class="plan-name">Silver</div>
                    <div class="plan-price">$49</div>
                    <div class="plan-period">per month</div>
                </th>
                <th scope="col">
                    <div class="plan-name">Gold</div>
                    <div class="plan-price">$99</div>
                    <div class="plan-period">per month</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" class="feature-name">Data Storage</th>
                <td>5 GB</td>
                <td>50 GB</td>
                <td>500 GB</td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Project Limit</th>
                <td>10</td>
                <td>50</td>
                <td>Unlimited</td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Email Support</th>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Phone Support</th>
                <td>Â </td>
                <td><span class="check">&check;</span></td>
                <td><span class="check">&check;</span></td>
            </tr>
            <tr>
                <th scope="row" class="feature-name">Dedicated Agent</th>
                <td>Â </td>
                <td>Â </td>
                <td><span class="check">&check;</span></td>
            </tr>
        </tbody>
    </table>
</div>