Responsive Pricing Table HTML & CSS

Building an effective website often means showcasing your services or products clearly. A responsive pricing table using HTML and CSS is a crucial element for this. It allows you to display different subscription plans or product tiers in an organized and visually appealing way. This tutorial will guide you through creating a pricing table that looks great on any device. Your users will have an easy time comparing options, whether they are on a desktop or a mobile phone.

Prepare Your Document

First, you need to link a stylesheet for icons. This will add some visual flair to your pricing table.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'>

Create the HTML Structure

Next, set up the basic layout for your pricing table. This includes a container, a grid for the cards, and individual cards for each pricing plan. Each card will have a title, pricing details, features, and a call-to-action button.

<div class="container">
        <div class="grid">
            <div class="card">
                <h2 class="card_title">Student</h2>
                <p class="pricing">20{{HTML_CODE}}lt;span class="small">/per month</span></p>
                <p>Save $9</p>
                <hr>
                <ul class="features">
                    <li>One account</li>
                    <li>Unlimited songs</li>
                    <li>Customized playlist</li>
                </ul>
                <a href="#" class="cta_btn">Buy Now</a>
            </div>
            <div class="card">
                <h2 class="card_title">Personal</h2>
                <p class="pricing">39{{HTML_CODE}}lt;span class="small">/per month</span></p>
                <p>Save $15</p>
                <hr>
                <ul class="features">
                    <li>One account</li>
                    <li>Unlimited songs</li>
                    <li>Customized playlist</li>
                </ul>
                 <a href="#" class="cta_btn">Buy Now</a>
            </div>
            <div class="card">
                <h2 class="card_title">Family</h2>
                <p class="pricing">60{{HTML_CODE}}lt;span class="small">/per month</span></p>
                <p>Save $25</p>
                <hr>
                <ul class="features">
                    <li>Six account</li>
                    <li>Unlimited songs</li>
                    <li>Customized playlist</li>
                </ul>
                 <a href="#" class="cta_btn">Buy Now</a>
            </div>
        </div>
    </div>
<a href="https://youtu.be/RLReK22LWTo" target="_blank" class="link">Watch on youtube <i class="fab fa-youtube"></i></a>

Style with CSS

Now, let’s make your pricing table look professional. The CSS code will style the overall body, the container, and each card. It also includes media queries to ensure the table is fully responsive on different screen sizes.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: url("https://images.unsplash.com/photo-1598125443421-779f98323fe4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-family: Roboto;
    font-size: 16px;
}

.container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4%;
    padding: 12% 0;
}

.card {
    padding: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 25px;
}

.card_title {
    font-weight: normal;
    font-size: 36px;
    margin-bottom: 20px;
}

.pricing {
    font-weight: normal;
    font-size: 96px;
}

.pricing .small {
    font-size: 16px;
}

hr {
    margin-top: 70px;
}

.features {
    margin: 40px 0;
    list-style-position: inside;
}

.features li {
    padding-bottom: 10px;
}

a.cta_btn {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: rgba(21, 23, 24, 0.7);
    border-radius: 29px;
    padding: 20px 0;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    transition: background .3s ease;
}

a.cta_btn:hover {
    background: #000;
}
.link {
    position: fixed;
    background-color: #D12322;
    padding: 23px 40px;
    right: -99px;
    border-radius: 5px;
    top: 50%;
    transform: translateY(-50%);
    transform: rotate(-90deg);
    font-size: 18px;
    font-weight: 500;
    color: #FFF;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .1s ease-in-out;
}

.link i {
    padding-left: 7px;
}

.link:hover {
    text-decoration: underline;
    background-color: black;
}
@media only screen and (max-width: 1024px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 2%;

    }
}

@media only screen and (max-width: 425px) {
    .grid {
        grid-template-columns: 1fr;
        gap: 2%;
        padding-bottom: 25%;
    }

    .container {
        padding: 0 1rem;
    }

    body {
        font-size: 14px;
    }

    .card {
        padding: 30px;
    }

    .card_title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .pricing {
        font-size: 52px;
    }

    hr {
        margin-top: 50px;
    }

    a.cta_btn {
        font-size: 11px;
    }
}

You have now successfully built a responsive pricing table using HTML and CSS. It is ready for your website.