Responsive Pricing Table UI using HTML, CSS, and JavaScript

By Bytewebster - October 27, 2022

Welcome to the bytewebster Front-End Project blogs. In this project we will see how to make a Responsive Pricing Table UI or design with the help of HTML and CSS.

Working/Use:

Before you go ahead, let's know its working or use. You can use this pricing table on your website to get your users to subscribe to something or to purchase a plan. In this we have added only 3 tables, if you want, you can also increase them according to your need, it will not affect its responsiveness. And there is also a toggler button at the top so that you can switch between monthly and annual plans.

Direct Download

Detailed Overview of Project

If you want to make this Responsive Pricing Table by yourself, without downloading the source code files. So then here you have to create three main files The first file will be HTML second will be CSS and the last will be JavaScript and then you have to take those files to your text editor where you will create this project.

HTML Structure

First we will work in HTML page. The HTML code is starts from the header tag which is the top of the page it has an h1 and a div. The h1 tag will have the text "Our Pricing" in it.

The div has the class of "cards". Below this are two divs: one for pricing information and another for cards. There is also a ul in the div that contains three pricing cards.

The first card has toggle buttons: one for yearly, and one for monthly. This toggle button will change based on what option you choose to select from each of its inputs. The toggle-btn class is used for the input field that allows users to choose their plan type (annually or monthly).

<header>
    <h1>Our Pricing</h1>
    <div class="toggle">
      <label>Annually </label>
      <div class="toggle-btn">
        <input type="checkbox" class="checkbox" id="checkbox" />
        <label class="sub" id="sub" for="checkbox">
          <div class="circle"></div>
        </label>
      </div>
      <label> Monthly</label>
    </div>
  </header>
  <div class="cards">
    <div class="card shadow">
      <ul>
        <li class="pack">Standard</li>
        <li id="basic" class="price bottom-bar">&dollar;199.99</li>
        <li class="bottom-bar">500 GB Storage</li>
        <li class="bottom-bar">2 Users Allowed</li>
        <li class="bottom-bar">Send up to 3 GB</li>
        <li class="bottom-bar">50 Email Accounts</li>
        <li><button class="btn"><i class="bi bi-bag"></i>&nbsp Order Now</button></li>
      </ul>
    </div>
    <div class="card active">
      <ul>
        <li class="pack">Professional</li>
        <li id="professional" class="price bottom-bar">&dollar;249.99</li>
        <li class="bottom-bar">1 TB Storage</li>
        <li class="bottom-bar">5 Users Allowed</li>
        <li class="bottom-bar">Send up to 10 GB</li>
        <li class="bottom-bar">Unlimited Email Accounts</li>
        <li><button class="btn active-btn"><i class="bi bi-bag"></i>&nbsp Order Now</button></li>
      </ul>
    </div>
    <div class="card shadow">
      <ul>
        <li class="pack">Master</li>
        <li id="master" class="price bottom-bar">&dollar;399.99</li>
        <li class="bottom-bar">2 TB Storage</li>
        <li class="bottom-bar">10 Users Allowed</li>
        <li class="bottom-bar">Send up to 20 GB</li>
        <li class="bottom-bar">Unlimited Email Accounts</li>
        <li><button class="btn"><i class="bi bi-bag"></i>&nbsp Order Now</button></li>
      </ul>
    </div>
  </div>

Styling With CSS

Now lets move to the CSS file that contains the styles for two buttons.The first button is called "toggle" and has a background color and an opacity of 0.5. The second button is called "checkbox" and has no background color or opacity set in its style sheet.

The code starts with some basic styling to make the buttons look like they are part of a row align-items centers items on both sides so that they can be seen as one unit when viewed from the top down (the left side).

Next, there are three classes defined which will be used later in order to add more specific styles for each button type. .toggle defines how the toggle button should look when it's not checked, .checkbox defines how checkboxes should look, and .sub defines how submenus should appear when they're not expanded yet.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 15px;
}
body {
  background: #f7f7ff;
  font-family: "Montserrat", sans-serif;
  width: 80%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}
header {
  color: hsl(233, 13%, 49%);
  margin: 3.3rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.toggle {
  margin-top: 2rem;
  color: hsl(234, 14%, 74%);
  display: flex;
  align-items: center;
}
.toggle-btn {
  margin: 0 1rem;
}
.checkbox {
  display: none;
}

.sub {
  background: linear-gradient(
    135deg,
    rgba(163, 168, 240, 1) 0%,
    rgba(105, 111, 221, 1) 100%
  );
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* height: 25px;
  width: 50px; */
  height: 1.6rem;
  width: 3.3rem;
  border-radius: 1.6rem;
  padding: 0.3rem;
}
.circle {
  background-color: #fff;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
}
.checkbox:checked + .sub {
  justify-content: flex-end;
}

.cards {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.card {
  background: #fff;
  color: hsl(233, 13%, 49%);
  border-radius: 0.8rem;
}
.card.active:hover{
  box-shadow: rgba(255, 188, 0, 0.8) 0px 0px 0px 3px;
}

.cards .card.active {
  background: linear-gradient(
    135deg,
    rgba(163, 168, 240, 1) 0%,
    rgba(105, 111, 221, 1) 100%
  );
  color: #fff;
  display: flex;
  align-items: center;
  transform: scale(1.1);
  z-index: 1;
}
ul {
  margin: 2.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
ul li {
  list-style-type: none;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1rem 0;
}
ul li.price {
  font-size: 3rem;
  color: hsl(232, 13%, 33%);
  padding-bottom: 2rem;
}
.shadow {
  box-shadow: -5px 5px 15px 1px rgba(0, 0, 0, 0.1);
}

.card.active .price {
  color: #fff;
}

.btn {
  margin-top: 1rem;
  height: 2.6rem;
  width: 13.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background: linear-gradient(
    135deg,
    rgba(163, 168, 240, 1) 0%,
    rgba(105, 111, 221, 1) 100%
  );
  color: #fff;
  outline: none;
  border: 0;
  font-weight: bold;
}
.btn:hover{
  cursor: pointer;
  color: #9499eb;
  background: white;
  border: 1px solid #9499eb;
}
.active-btn {
  background: #fff;
  color: hsl(237, 63%, 64%);
}
.active-btn:hover{
  background: #9499eb;
  color: white;
  border: 1px solid white;
  cursor: pointer;
}
.bottom-bar {
  border-bottom: 2px solid hsla(240, 8%, 85%, 0.582);
}
.card.active .bottom-bar {
  border-bottom: 2px solid hsla(240, 8%, 85%, 0.253);
}
.pack {
  font-size: 1.1rem;
}

@media (max-width: 280px) {
  ul {
    margin: 1rem;
  }
  h1 {
    font-size: 1.2rem;
  }
  .toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 80px;
  }
  .cards {
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .card {
    transform: scale(0.8);
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(0.8);
  }
}

@media (min-width: 280px) and (max-width: 320px) {
  ul {
    margin: 20px;
  }
  .cards {
    display: flex;
    flex-direction: column;
  }
  .card {
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}

@media (min-width: 320px) and (max-width: 414px) {
  .cards {
    display: flex;
    flex-direction: column;
  }
  .card {
    margin-bottom: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}
@media (min-width: 414px) and (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
    margin-right: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}
@media (min-width: 768px) and (max-width: 1046px) {
  .cards {
    display: flex;
  }
  .card {
    margin-bottom: 1rem;
    margin-right: 1rem;
  }
  .cards .card.active {
    transform: scale(1);
  }
}

The last line creates a new class called "btn".This class will be used later on to create custom styles for each individual button type by adding different margins around them based on The code is an example of a CSS snippet that would be used to create a collapsible navigation menu.

he next few lines are just basic styling for the card element with no other purpose than to make them look nice and neat. They're all set at 1rem height and 3rem width so they can fit nicely into their container without being too big or small.

There's also a border radius applied so they have rounded corners like circles do by default when using flexbox layout mode (flex-wrap: wrap;). and The .shadow {} is used to create a shadow effect on the cards.

JavaScript Explanation

In the JavaScript file first we will create a checkbox element with the id of “checkbox”.

And after this We create three elements with the id of “professional”, “master”, and “basic”. then We add an event listener to the checkbox element that will execute the code when the checkbox is clicked.

Last We use the JavaScript ternary operator to change the text content of the “basic”, “professional”, “master”, element based on the checkbox’s state.

const checkbox = document.getElementById("checkbox");
const professional = document.getElementById("professional");
const master = document.getElementById("master");
const basic = document.getElementById("basic");

checkbox.addEventListener("click", () => {
  basic.textContent = basic.textContent === "$199.99" ? "$19.99" : "$199.99";
  professional.textContent =
    professional.textContent === "$249.99" ? "$24.99 " : "$249.99";
  master.textContent = master.textContent === "$399.99" ? "$39.99" : "$399.99";
});

Thank you for spending your valuable time in reading this article. We hope you liked the project.

Video of the Project

Javascript Animated Tab Bar

Weather Application Using Javascript

jQuery Multi-Step Application Form

Javascript Card slider parallax effect

Take This Short Survey!

Download Source Code Files

From here You can download the source code files of this CSS Pricing Table UI.
If you are just starting in web development, these snippets will be useful. We would appreciate it if you would share our blog posts with other like-minded people.