Responsive Pricing Table HTML & CSS Snippets

Responsive Pricing Table HTML & CSS Snippets

by Frontendor UI Library

HTML

<section id="pricing-container">

        <div id="pricing-switch">
            <h2>Choose a plan</h2>
            <span class="switch-label switch-label-monthly active">Monthly</span>
            <label class="switch" id="">
                <input type="checkbox" checked="checked">
                <span class="slider"></span>
            </label>
            <span class="switch-label switch-label-yearly ">Yearly </span>
    
            <div class="save-money--mobile">Save 10% on Yearly Plans</div>
    
        </div>
        <!-- end of pricing-switch -->
    
        <div id="pricing-cards">
    
            <!-- ============================= -->
            <!-- = Premium Subscription Card = -->
            <!-- ============================= -->
            <div class="price-card">
    
                <div class="price-card--header">
                    <h4>Premium</h4>
                    <!-- <p>for growing your business</p> -->
                </div>
    
                <div class="price-card--price">
                    <div class="price-card--price-text">
                        <div class="price-card--price-number toggle-price-content odometer" data-price-monthly="2,499" data-price-yearly="2,250">2,250</div>
                    </div>
                    <div class="price-card--price-conditions">
                        <div class="toggle-price-content" data-price-monthly="Billed Monthly" data-price-yearly="Billed Annually">Billed Annually</div>
  
                    </div>
                </div>
    
                
    
                <div class="price-card--features">
    
                    <ul class="price-card--features--list">
                        <li class="price-card--features--item has-tooltip">Sales & Marketing Platform
                            <div class="tooltip-container"><strong>Sales & Marketing Platform</strong>
                                <p  >Vendasta's end-to-end sales solution for companies that serve local...

CSS

body{
	padding:0;
	margin: 0;
	background:#1E1E21;
	color:#fff;
}
h2{
	font-size: 30px;
	color:#fff;
}
p{
	color:rgb(238, 231, 231);
}
.has-tooltip:not(.tooltip-disabled) {
	cursor: help;
	position:relative;
}

.has-tooltip:not(.tooltip-disabled):hover
	.tooltip-container {
	display: block;
}

.has-tooltip .tooltip-container {
	display: none;
	position: absolute;
	background-color: #BE3760;
	color:#fff;
	z-index: 20;
	bottom: calc(100% + 13px);
	left: -10px;
	right: -10px;
	padding: 16px 20px;
	border-radius: 8px;

}
.has-tooltip .tooltip-container:after {
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #BE3760;
	font-size: 0;
	line-height: 0;
	content: "";
	position: absolute;
	bottom: -10px;
}

.has-tooltip .tooltip-container h6 {
	font-weight: 600;
	font-size: 16px;
	margin: 0px;
}

.has-tooltip .tooltip-container  {
	color: #555;
	margin-top:4px;
}
/* - - - - - - - End Tooltips - - - */





#pricing-container * {
	box-sizing:border-box;
}

#pricing-container {
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	-webkit-font-smoothing: antialiased;
	max-width: 1080px;
	margin: 0 auto 50px;
	justify-content: center;
	line-height: 1;
	color: #000;
}



/* Cards */

#pricing-cards {
	display: flex;
	font-size: 14px;
}

#pricing-container .price-card {
	background-color: #33333a;
	color:#fff;
	font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
	display: block;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
	transition: all 0.25s;
	position: relative;
	margin: 0 6px;
	flex-grow: 1;
	flex-shrink:1;
}

#pricing-container .price-card:hover {
	transform: translateY(-5px);
		box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.14),
		0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}


/* - - - - - - - - - Header Section - - - */

#pricing-container .price-card--header {
	
	margin: 0;
	padding: 20px 0;
	text-align:...