Responsive Pricing Table HTML & CSS Snippets

Responsive Pricing Table HTML & CSS Snippets

by Frontendor UI Library

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <div class=" container-fluid pricingTable pt-90">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="inner d-flex tabsBtnHolder">
                        <ul>
                            <li><p id="monthly" class="active">Monthly</p></li>
                            <li><p id="yearly" class="">Yearly</p></li>

                            <li class="indicator"></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="row monthlyPriceList animated">
                <div class="col-md-4">
                    <div class="inner holder">
                        <div class="hdng">
                            <p>Starter Plan</p>
                        </div>
                        <div class="price mt-5">
                            <p><b>$49.99</b><span> / mo</span></p>
                        </div>
                        <div class="info">
                            <p>Increase Traffic 130%</p>
                            <p>Backlink Analysis</p>
                            <p>Organic Trafic 215%</p>
                            <p>10 Free Optimization</p>
                            <p>24/7 Support</p>
                        </div>
                        <div class="btn">
                            <a href="#" class="readon">Buy Now</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="inner holder active">
                        <div class="hdng">
                            <p>Basic Plan</p>
                        </div>
                        <div class="price mt-5">
                            <p><b>$69.99</b><span> /...

CSS

@charset "utf-8";
@import url('fontawesome-all.min');

html,
body {
    font-size: 15px;
    color: #505050;
    font-family: 'Rubik', sans-serif;
    vertical-align: baseline;
    line-height: 25px;
    font-weight: 400;
    overflow-x: hidden;
}
p {
    margin: 0 0;
}
a {
    color: #f36233;
    transition: all 0.3s ease 0s;
    text-decoration: none !important;
    outline: none !important;
}
a:active,
a:hover {
    text-decoration: none;
    outline: 0 none;
    color: #242526;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
::-moz-selection {
    background: #f36233;
    text-shadow: none;
    color: #ffffff;
}
::selection {
    background: #f36233;
    text-shadow: none;
    color: #ffffff;
}


.pt-90 {
    padding-top: 90px !important;
}

/* ------------------------------------
02. Global CSS
---------------------------------------*/
.readon {
    position: relative;
    display: inline-block !important;
    background: #f36233;
    padding: 14px 30px;
    line-height: normal;
    color: #ffffff !important;
    transition: all 0.3s ease 0s;
    border-radius: 30px;
    text-transform: capitalize !important;
    cursor: pointer;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
}
.readon:hover,
.readon:focus {
    background: #242526;
}

.inner{
    width:100%;
    float:left;
    position:relative;
}



.pricingTable .holder{
    background: #fff;
    box-shadow: 1px 20px 12px -15px rgba(0,0,0,0.2);
    padding: 40px 15px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    transition:0.5s ease;
}

.pricingTable .holder:hover{
    transform:translateY(-5px);
    
}



.pricingTable .holder .hdng p{
    font-size:28px;
    font-weight:bold;
    color:#242526;
}

.pricingTable .holder .img img{
    width:70%;
}

.pricingTable .holder .price p{
    color:#f36233;
 ...

JavaScript

/***** for pricing table (tabs | monthly & yearly) ******/
    $(document).ready(function() {
            $("#monthly").click(function(){
                    $(this).addClass('active');
                    $("#yearly").removeClass('active')

                    $(".monthlyPriceList").removeClass('d-none');
                    $(".monthlyPriceList").addClass('fadeIn');
                    $(".yearlyPriceList").addClass('d-none');

                    $(".indicator").css("left","2px");
            })

            $("#yearly").click(function(){
                    $(this).addClass('active');
                    $("#monthly").removeClass('active');

                    $(".yearlyPriceList").removeClass('d-none');
                    $(".yearlyPriceList").addClass('fadeIn');
                    $(".monthlyPriceList").addClass('d-none');

                    $(".indicator").css("left","163px");
            })
    })
    /***** for pricing table (tabs | monthly & yearly) ******/