DocsAllOver Fully Responsive CSS Price Table Grid and Plan Details Snippets

Fully Responsive CSS Price Table Grid and Plan Details

April 10, 2025

HTML, CSS, Responsive, Card, Clean UI, Pricing Tables, Table

Full Screen

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fully Responsive CSS Price Table Grid and Plan Details</title>
</head>

<body>
    <section>
        <div class="content">

            <div class="basic box">
                <h2 class="title">Basic</h2>
                <div class="view">
                    <div class="icon">
                        <img src="https://i.postimg.cc/2jcfMcf4/hot-air-balloon.png" alt="hot-air-balloon">
                    </div>
                    <div class="cost">
                        <p class="amount">$49</p>
                        <p class="detail">per month</p>
                    </div>
                </div>
                <div class="description">
                    <ul>
                        <li><strong>Storage:</strong> 10 GB</li>
                        <li><strong>Traffic:</strong> 100 GB</li>
                        <li><strong>Sites:</strong> 1</li>
                        <li><strong>Power:</strong> Low</li>
                        <li><strong>Help:</strong> Email</li>
                        <li><strong>Extras:</strong> Free SSL</li>
                    </ul>
                </div>
                <div class="button">
                    <button type="submit">START FREE 7 DAYS TRIAL</button>
                </div>
            </div>

            <div class="standard box">
                <h2 class="title">Standard</h2>
                <div class="view">
                    <div class="icon">
                        <img src="https://i.postimg.cc/DzrTN72Z/airplane.png" alt="airplane">
                    </div>
                    <div class="cost">
                        <p class="amount">$99</p>
                        <p class="detail">per month</p>
                    </div>
                </div>
                <div class="description">
                    <ul>
                        <li><strong>Storage:</strong> 50 GB</li>
                        <li><strong>Traffic:</strong> 500 GB</li>
                        <li><strong>Sites:</strong> 5</li>
                        <li><strong>Power:</strong> Mid</li>
                        <li><strong>Help:</strong> Chat</li>
                        <li><strong>Extras:</strong> Free SSL</li>
                    </ul>
                </div>
                <div class="button">
                    <button type="submit">START FREE 7 DAYS TRIAL</button>
                </div>
            </div>

            <div class="business box">
                <h2 class="title">Business</h2>
                <div class="view">
                    <div class="icon">
                        <img src="https://i.postimg.cc/wvFd6FRY/startup.png" alt="startup">
                    </div>
                    <div class="cost">
                        <p class="amount">$199</p>
                        <p class="detail">per month</p>
                    </div>
                </div>
                <div class="description">
                    <ul>
                        <li><strong>Store:</strong> 200 GB</li>
                        <li><strong>Traffic:</strong> Limitless</li>
                        <li><strong>Sites:</strong> Many</li>
                        <li><strong>Power:</strong> High</li>
                        <li><strong>Help:</strong> Phone</li>
                        <li><strong>Extras:</strong>Auto Backups, Own IP</li>
                    </ul>
                </div>
                <div class="button">
                    <button type="submit">START FREE 7 DAYS TRIAL</button>
                </div>
            </div>

        </div>
    </section>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>

</html>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}

:root {
    --pinkish-red: linear-gradient(to bottom, #FF69B4, #DC143C);
    ;
    --medium-blue: linear-gradient(to bottom, #6495ED, #0000CD);
    ;
    --greenish-blue: linear-gradient(to bottom, #98FB98, #4682B4);
    ;
    --bright-orange: linear-gradient(to bottom, #FFA500, #FF8C00);
    ;
    --white-smoke: #F5F5F4;
    --white: #FFF;
    --dark-gray: #7D7C7C;
    --black: #000;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    background: var(--white-smoke);
}

.content {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 100px;
}

.box {
    display: flex;
    flex-direction: column;
    height: 586px;
    width: 300px;
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;

    background: var(--white);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 20%);
}

.title {
    width: 100%;
    padding: 10px 0;
    font-size: 1.2em;
    font-weight: lighter;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;

    color: var(--white-smoke);
}

.basic .title {
    background: var(--pinkish-red);
}

.standard .title {
    background: var(--medium-blue);
}

.business .title {
    background: var(--greenish-blue);
}

.view {
    display: block;
    width: 100%;
    padding: 30px 0 20px;

    background: var(--white-smoke);
}

.icon {
    display: flex;
    justify-content: center;
}

.icon img {
    width: 100px;
}

.cost {
    display: flex;
    justify-content: center;
    flex-direction: row;
    margin-top: 10px;
}

.amount {
    font-size: 2.8em;
    font-weight: bolder;
}

.detail {
    margin: auto 0 auto 5px;
    width: 70px;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 15px;
    color: #7D7C7C;
}

.description {
    margin: 30px auto;
    font-size: 0.8em;
    color: #7D7C7C;
}

ul {
    list-style: none;
}

li {
    margin-top: 10px;
}

li::before {
    content: "";
    background-image: url("https://i.postimg.cc/ht7g996V/check.png");
    background-position: center;
    background-size: cover;
    opacity: 0.5;

    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
}

.button {
    margin: 0 auto 30px;
}

button {
    height: 40px;
    width: 250px;
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #7D7C7C;
    border: 2px solid var(--dark-gray);
    border-radius: 50px;

    background: transparent;
}

button:hover {
    color: var(--white-smoke);
    transition: 0.5s;
    border: none;

    background: var(--bright-orange);
}

@media screen and (max-width:970px) {
    .content {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 50px auto;
    }

    .standard,
    .business {
        margin-top: 25px;
    }
}

//Doesn't require any JS.

This CSS snippet creates a visually structured and highly adaptable price table grid, designed to clearly present plan details across various screen sizes. The table offers an organized way to compare pricing options, ensuring a consistent and user-friendly experience for potential customers.

Key Features:

Responsive Design: The table adapts seamlessly to different screen sizes, providing optimal viewing on desktops, tablets, and mobile devices.
Clear Plan Details: The grid structure allows for the organized presentation of features and benefits for each pricing tier.
Grid-Based Layout: Utilizes CSS Grid for a structured and flexible layout of pricing plans and their details.
User-Friendly Comparison: Facilitates easy comparison of different pricing tiers and their included features.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the price table, including containers for each plan, headings, feature lists, and call-to-action buttons.
Apply CSS Grid Layout: Use CSS Grid properties to define the layout of the price table, organizing plan columns and rows for features.
Style the Table Elements: Use CSS to style the various elements of the price table, such as headings, text, borders, and buttons, ensuring visual clarity.
Implement Responsive Adjustments: Utilize CSS media queries to adjust the layout and styling of the price table for different screen sizes, ensuring responsiveness.

By following these steps, you can create a fully responsive and visually clear price table grid that effectively communicates your pricing plans and enhances the user experience on your website.

Latest Snippets

View All