Responsive Pricing Table HTML using Bootstrap 4

It is a responsive and pretty UI pricing table HTML using Bootstrap 4. You don’t need to make it from the start, here we just need to copy this code and paste it into your project.

HTML

body {
    background: #00BCD4;
}
.pricing-table {
    margin: 50px 0px;
}
.pricing-table h1 {
    color: #fff;
    margin: 20px 0px 40px;
    border-bottom: 1px solid #fff;
    padding-bottom: 30px;
}
.benefit {
    background: #fff;
    padding: 25px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 5px 0px #525252;
    border-top-left-radius: 30px;
    border: 2px solid #ffffff;
    border-bottom-right-radius: 30px;
    transition: 0.5s linear;
    margin-bottom: 40px;
}
.benefit:hover {
    border-color: #FFEB3B;
}
.benefit h2 {
    font-size: 28px;
    margin-bottom: 20px;
}
.benefit ul{
  margin: 0;
  padding: 0;
}
.benefit ul li {
    padding: 10px 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
}
.benefit ul li:last-child {
    border-bottom: 0px;
}
.price{
  font-size: 40px;
  margin-bottom: 20px;
}
.price span {
    font-size: 16px;
    color: #00bcd4;
}
.benefit a {
    text-decoration: none;
    color: #00bcd4;
    border: 2px solid #00bcd4;
    display: block;
    padding: 10px 0;
    margin: 20px 0 10px;
    border-radius: 30px;
    text-transform: uppercase;
    font-size: 16px;
    transition: 0.5s linear;
    text-align: center;
    font-weight: bold;
}
.benefit a:hover {
    background: #03bcd4;
    color: #fff;
}
.recommend-txt {
    background: #14bad0;
    color: #fff;
    transform: rotate(45deg);
    padding: 6px 30px;
    position: absolute;
    top: 18px;
    right: -34px;
}

CSS

body {
    background: #00BCD4;
}
.pricing-table {
    margin: 50px 0px;
}
.pricing-table h1 {
    color: #fff;
    margin: 20px 0px 40px;
    border-bottom: 1px solid #fff;
    padding-bottom: 30px;
}
.benefit {
    background: #fff;
    padding: 25px 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 5px 0px #525252;
    border-top-left-radius: 30px;
    border: 2px solid #ffffff;
    border-bottom-right-radius: 30px;
    transition: 0.5s linear;
    margin-bottom: 40px;
}
.benefit:hover {
    border-color: #FFEB3B;
}
.benefit h2 {
    font-size: 28px;
    margin-bottom: 20px;
}
.benefit ul{
  margin: 0;
  padding: 0;
}
.benefit ul li {
    padding: 10px 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
}
.benefit ul li:last-child {
    border-bottom: 0px;
}
.price{
  font-size: 40px;
  margin-bottom: 20px;
}
.price span {
    font-size: 16px;
    color: #00bcd4;
}
.benefit a {
    text-decoration: none;
    color: #00bcd4;
    border: 2px solid #00bcd4;
    display: block;
    padding: 10px 0;
    margin: 20px 0 10px;
    border-radius: 30px;
    text-transform: uppercase;
    font-size: 16px;
    transition: 0.5s linear;
    text-align: center;
    font-weight: bold;
}
.benefit a:hover {
    background: #03bcd4;
    color: #fff;
}
.recommend-txt {
    background: #14bad0;
    color: #fff;
    transform: rotate(45deg);
    padding: 6px 30px;
    position: absolute;
    top: 18px;
    right: -34px;
}