How to Create a Responsive Pricing Table Using HTML and CSS Flexbox
Pricing tables are an essential part of many modern websites. They are commonly used in SaaS platforms, product landing pages, and subscription-based services to display different plans and features clearly.
Using Flexbox, we can easily build a responsive and clean pricing table layout that works across different screen sizes without complicated CSS.
In this tutorial, you will learn how to create a responsive pricing table using HTML and CSS Flexbox step by step.
Why Use Flexbox for Pricing Tables?
Flexbox makes layout design easier because it provides powerful alignment and spacing controls.
Benefits of using Flexbox include:
- Easy horizontal and vertical alignment
- Responsive layout with minimal code
- Flexible spacing between elements
- Clean and modern UI structure
Step 1: HTML Structure
First, create a simple HTML structure with three pricing plans.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="style.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
</style>
</head>
<body>
<div class="container">
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<h5 class="logo">Company Name</h5>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
</ul>
</nav>
</header>
<div class="pricing-table-container">
<h5>Choose your perfect plan</h5>
<div class="card-container">
<div class="card pricing-basic">
<div class="card-header">
<h1>Basic</h1>
</div>
<div class="card-body">
<h2>$20<span>/mo</span></h2>
<ul>
<li>10 Projects</li>
<li>25 GB Storage</li>
<li>Basic Support</li>
<li>1 User</li>
</ul>
</div>
<div class="card-button">
<button>Choose Plan</button>
</div>
</div>
<div class="card pricing-pro">
<div class="card-header">
<h1>Pro</h1>
</div>
<div class="card-body">
<h2>$40<span>/mo</span></h2>
<ul>
<li>30 Projects</li>
<li>50 GB Storage</li>
<li>12 hours Support</li>
<li>5 User</li>
</ul>
</div>
<div class="card-button">
<button>Choose Plan</button>
</div>
</div>
<div class="card pricing-enterprise">
<div class="card-header">
<h1>Enterprise</h1>
</div>
<div class="card-body">
<h2>$80<span>/mo</span></h2>
<ul>
<li>50 Projects</li>
<li>100 GB Storage</li>
<li>24/7 Support</li>
<li>10 User</li>
</ul>
</div>
<div class="card-button">
<button>Choose Plan</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step2: CSS Syntax
*{
margin: 0;
padding: 0;
list-style-type: none;
}
body{
background-color: #ffffff;
font-family: Roboto;
}
header{
background-color: #1d70b8;
}
header .logo{
color: #ffffff;
font-size: 24px;
}
header nav{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
}
header ul{
display: flex;
gap: 25px;
list-style: none;
}
header ul li a{
text-decoration: none;
color: #ffffff;
font-size: 16px;
}
.pricing-table-container h5{
font-size: 32px;
display: flex;
justify-content: center;
padding: 50px 0px;
font-weight: 200;
}
.card-container{
max-width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
}
.card-container .card{
width: calc((100% - 100px) / 3);
text-align: center;
border: 1px solid #eeeeee;
border-radius: 5px;
box-shadow:3px 3px 3px #f8f2ff;
transition: all 0.3s ease;
}
.card-container h1{
padding: 25px 0px;
}
.pricing-basic .card-header h1{
background: linear-gradient(45deg, #48e077, #c33beb);
color: #ffffff;
}
.pricing-pro .card-header h1{
background: linear-gradient(45deg, #4d188d, #8aff6a);
color: #ffffff;
}
.pricing-enterprise .card-header h1{
background: linear-gradient(45deg, #1D976C, #93F9B9);
color: #ffffff;
}
.card-container .card:hover{
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.card-container h2{
padding: 40px 0px;
}
.card-container .card-body ul{
margin-bottom: 25px;
}
.card-container .card ul li{
padding: 15px 0px;
border-bottom: 1px solid #eeeeee;
}
.card-container .card ul li:last-child{
border-bottom: 0;
}
button{
background: none;
font-size: 18px;
padding: 10px 25px;
border-radius: 50px;
margin-bottom: 20px;
font-weight: bold;
color: #ffffff;
border: none;
cursor: pointer;
}
.pricing-basic button{
border: 1px solid #0d6efd;
color: #0d6efd;
color: 0d6efd;
}
.pricing-pro button{
background-color: #0d6efd;
color: #ffffff;
}
.pricing-enterprise button{
background-color: #198754;
color: #ffffff;
}
.checkbtn {
font-size: 30px;
color: white;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media only screen and (max-width: 792px) {
.card-container .card{
width: 100%;
}
}
@media (max-width: 768px) {
.checkbtn {
display: block;
order: 1;
}
nav ul {
position: fixed;
top: 65px;
right: -100%;
background-color: green;
width: 50%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.3s;
z-index: 1001;
}
nav ul li {
margin: 20px 0;
}
nav ul li a {
font-size: 20px;
}
#check:checked ~ ul {
right: 0;
}
}
Step:3 Output- Desktop mode
Step:4 Output - Mobile mode
This Flexbox pricing table provides:
- Clean UI design 2 Responsive layout
- Easy customization
- Modern card-based design
You can easily add more plans, highlight the best plan, or integrate animations for better user experience.
Github Link:
Balasenthil
/
UI-Development
A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.
UI-Development
A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.
Check out more web development articles by clicking the link below.
Dev with Bala
HTML5 and CSS3 basics for beginners tutorial with examples. Learn HTML5 structure, tags, attributes, forms, and lists with easy step-by-step explanations for web development beginners.
devwithbala.blogspot.com
Top comments (0)