If you’re building an agency website and need a pricing table, this post is for you. We’ll make a modern, responsive pricing table using HTML, CSS, and JavaScript — and it’s easier than you think.
The table includes a toggle button that switches between plans, so visitors can quickly see the right option. It’s a neat, user-friendly way to display your offers.
Let’s build it step by step — no delays.
Understand which file you need to create a pricing table
you need to create only 3 type of file
- index.html – This file contains the main structure of your responsive and modern pricing table. All the content and layout start from here.
- style.css – This file handles the design. It’s the most important part because it controls how your entire pricing table looks — colors, spacing, fonts, and overall style.
- index.js – This file is used for adding functions and interactions. For example, if you want something to happen when a user clicks a button, you’ll write that logic here. Since it’s JavaScript, you can add any behavior you need.
Create an HTML File and Paste the Code Below
This file will hold the main structure of the table. Once your file is ready, simply copy the HTML code given below and paste it inside the body section of your document. This will set up the basic layout we’ll style and make interactive later.
<div class="container">
<button class="top">PRICING</button>
<h1 class="heading">Plan to Fit Your Business</h1>
<div class="togglePlan">
<h3>Monthly</h3> <input type="checkbox" id="check"> <h3>Yearly</h3>
</div>
<div class="pricing-card">
<div class="card" data-name="monthly">
<div class="inner-card">
<label>Pro</label>
<h1 class="amount">$199/m</h1>
<p class="msg">Price Brackdown Here</p>
<button class="buyBtn">Get Started</button>
<p class="secondMsg">Got questions? Talk to an expert</p>
</div>
<ul>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
</ul>
<div class="addon">
<p>Optional add-ons</p>
<i class="ri-add-fill"></i>
</div>
</div>
<div class="card" data-name="monthly">
<div class="inner-card">
<label>Pro</label>
<h1 class="amount">$499/m</h1>
<p class="msg">Price Brackdown Here</p>
<button class="buyBtn">Get Started</button>
<p class="secondMsg">Got questions? Talk to an expert</p>
</div>
<ul>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
</ul>
<div class="addon">
<p>Optional add-ons</p>
<i class="ri-add-fill"></i>
</div>
</div>
<div class="card" data-name="monthly">
<div class="inner-card">
<label>Pro</label>
<h1 class="amount">$799/m</h1>
<p class="msg">Price Brackdown Here</p>
<button class="buyBtn">Get Started</button>
<p class="secondMsg">Got questions? Talk to an expert</p>
</div>
<ul>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
</ul>
<div class="addon">
<p>Optional add-ons</p>
<i class="ri-add-fill"></i>
</div>
</div>
<div class="card" data-name="yearly">
<div class="inner-card">
<label>Pro</label>
<h1 class="amount">$899/y</h1>
<p class="msg">Price Brackdown Here</p>
<button class="buyBtn">Get Started</button>
<p class="secondMsg">Got questions? Talk to an expert</p>
</div>
<ul>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
</ul>
<div class="addon">
<p>Optional add-ons</p>
<i class="ri-add-fill"></i>
</div>
</div>
<div class="card" data-name="yearly">
<div class="inner-card">
<label>Pro</label>
<h1 class="amount">$1199/y</h1>
<p class="msg">Price Brackdown Here</p>
<button class="buyBtn">Get Started</button>
<p class="secondMsg">Got questions? Talk to an expert</p>
</div>
<ul>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
</ul>
<div class="addon">
<p>Optional add-ons</p>
<i class="ri-add-fill"></i>
</div>
</div>
<div class="card" data-name="yearly">
<div class="inner-card">
<label>Pro</label>
<h1 class="amount">$1599/y</h1>
<p class="msg">Price Brackdown Here</p>
<button class="buyBtn">Get Started</button>
<p class="secondMsg">Got questions? Talk to an expert</p>
</div>
<ul>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
<li> <i class="ri-checkbox-circle-line"></i> Feature Here</li>
</ul>
<div class="addon">
<p>Optional add-ons</p>
<i class="ri-add-fill"></i>
</div>
</div>
</div>
</div>
Create a CSS File and Add the Code Below
Now that the HTML structure is ready, create a CSS file to style your pricing table. This file will control the layout, colors, spacing, and overall look of the design. Once your CSS file is created, copy the code below and paste it there to apply the complete styling to your project.
/* This is CSS code use in style tag and externel css file*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Hubot Sans", sans-serif;
}
body{
background: #f5f5f5;
}
::selection{
background-color: #1d32eb;
color: #fff;
}
.container{
max-width: 1200px;
width: 100%;
padding: 20px;
margin: 50px auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.top{
padding: 10px;
border: none;
border-radius: 10px;
background: #fff;
color: #1d32eb;
font-weight: 500;
}
.heading{
font-size: 60px;
font-weight: 700;
text-align: center;
}
.togglePlan{
display: flex;
gap: 10px;
}
.togglePlan #check{
appearance: none;
width: 60px;
height: 30px;
background: #fff;
outline: 1px solid rgb(201, 201, 201);
border-radius: 50px;
cursor: pointer;
position: relative;
}
#check::before{
content: '';
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #1d32eb;
position: absolute;
top: 2.5px;
left: 2.5px;
transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#check:checked::before{
left: calc(100% - 25px - 2.5px);
}
.pricing-card{
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.card{
flex-basis: 300px;
background-color: #fff;
min-height: 300px;
padding: 5px;
padding-bottom: 20px;
border-radius: 25px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
transition: all 0.5s;
}
.card.hide{
display: none;
}
.card:hover{
box-shadow: 5px 5px 20px #1d32eb88;
scale: 1.02;
}
.card .inner-card{
width: 100%;
min-height: 230px;
background-color: #f5f5f5;
padding: 20px;
border-radius: 20px;
}
.inner-card label{
font-weight: 500;
}
.inner-card .amount{
font-size: 45px;
}
.inner-card .msg{
font-size: 14px;
margin-bottom: 20px;
font-weight: 500;
}
.inner-card .secondMsg{
font-size: 14px;
margin-top: 20px;
font-weight: 500;
text-align: center;
color: #6d6d6d;
}
.inner-card .buyBtn{
width: 280px;
min-height: 45px;
border: none;
color: #fff;
font-size: 14px;
font-weight: 500;
border-radius: 50px;
background: linear-gradient(to left, #1d32eb, #3448ff);
cursor: pointer;
}
.card ul{
width: 100%;
padding: 20px;
list-style: none;
}
.card ul li {
margin-bottom: 10px;
color: #6d6d6d;
font-weight: 500;
}
.card ul li i{
color: #3448ff;
}
.card .addon{
width: 95%;
height: 55px;
background-color: #f5f5f5;
border-radius: 50px;
display: flex;
justify-content: space-between;
padding: 0 20px;
align-items: center;
text-align: center;
cursor: pointer;
}
.addon p{
font-size: 13px;
font-weight: 600;
color: #6d6d6d;
}
@media screen and (max-width:450px){
.heading{
font-size: 40px;
}
}
Create Your JavaScript File and Insert the Following Code
The final step is to add interactivity using JavaScript. Create a JS file to handle all the functions and actions in your pricing table, such as button clicks or plan toggles. Once your file is ready, copy the JavaScript code below and paste it inside your JS file to make the table fully functional.
const checkBtn = document.querySelector("#check");
const pricingBox = document.querySelectorAll(".pricing-card .card");
// console.log(pricingBox)
pricingBox[3].classList.add("hide")
pricingBox[4].classList.add("hide")
pricingBox[5].classList.add("hide")
const toggltBtn = (event) => {
// console.log(event.target)
if(event.target.checked){
pricingBox.forEach( e => {
if(e.dataset.name === "monthly"){
e.classList.add("hide")
}
if(e.dataset.name === "yearly"){
e.classList.remove("hide")
}
})
}else{
pricingBox.forEach( e => {
if(e.dataset.name === "yearly"){
e.classList.add("hide")
}
if(e.dataset.name === "monthly"){
e.classList.remove("hide")
}
})
}
}
checkBtn.addEventListener("click", toggltBtn)
Conclusion
Creating a modern, responsive pricing table using HTML, CSS and JavaScript is a simple way to present your plans in a clean and professional layout. With a simple architecture, intuitive design, and a small JavaScript toggle feature, your users can easily compare pricing options on any device. Now that you have the complete code and steps, you can customize the colors, layout, and features to perfectly match your website. This pricing table is ready to use in any project – agency sites, portfolios, SaaS pages or business websites.