Views 104
Pricing Card tabs Component: UIUX
Pricing Card tabs Component: UIUX
Monthly
Yearly
Free
$0.00 /monthStarter Popular
$7.49 /monthPro
$11.49 /monthFree
$0.00 /monthStarter Popular
$9.99 /monthPro
$19.99 /month<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<section class="container-these">
<div class="container">
<div class="inner_container">
<div class="btn">
<span class="active_bg" style="left: 8px;"></span>
<span class="pricing_btn monthly active" data-class="pricing1">Monthly</span>
<span class="pricing_btn yearly" data-class="pricing2">Yearly</span>
</div>
<div class="pricing pricing1 active">
<div class="payment monthly active">
<div class="free">
<h2>Free</h2>
<span class="money">$0.00 <span>/month</span></span>
</div>
<span class="select_icon monthly_icon active"></span>
</div>
<div class="payment monthly">
<div class="free">
<h2>Starter <span>Popular</span></h2>
<span class="money">$7.49 <span>/month</span></span>
</div>
<span class="select_icon monthly_icon"></span>
</div>
<div class="payment monthly">
<div class="free">
<h2>Pro</h2>
<span class="money">$11.49 <span>/month</span></span>
</div>
<span class="select_icon monthly_icon "></span>
</div>
</div>
<div class="pricing pricing2">
<div class="payment yearly active">
<div class="free">
<h2>Free</h2>
<span class="money">$0.00 <span>/month</span></span>
</div>
<span class="select_icon yearly_icon active"></span>
</div>
<div class="payment yearly">
<div class="free">
<h2>Starter <span>Popular</span></h2>
<span class="money">$9.99 <span>/month</span></span>
</div>
<span class="select_icon yearly_icon"></span>
</div>
<div class="payment yearly">
<div class="free">
<h2>Pro</h2>
<span class="money">$19.99 <span>/month</span></span>
</div>
<span class="select_icon yearly_icon"></span>
</div>
</div>
<button class="action_btn">Get Started</button>
</div>
</div>
</section>JavaScript
<script>
const pricing_btn = document.querySelectorAll(".pricing_btn ");
const active_bg = document.querySelector(".active_bg");
const pricing = document.querySelectorAll(".pricing");
const payment = document.querySelectorAll(".payment ");
const monthly = document.querySelectorAll(".monthly");
const yearly = document.querySelectorAll(".yearly");
const monthly_icon = document.querySelectorAll(".monthly_icon");
const yearly_icon = document.querySelectorAll(".yearly_icon");
pricing_btn.forEach(function(btn){
btn.addEventListener("click",function(){
pricing_btn.forEach(btn => btn.classList.remove("active"));
this.classList.add("active");
// var active_width = this.offsetWidth;
var active_left = this.offsetLeft;
active_bg.style.cssText = "left:" +active_left+ "px;";
var class_name = this.getAttribute("data-class");
pricing.forEach(function(c){
c.classList.remove("active");
});
document.querySelector("." + class_name).classList.add("active");
});
});
payment.forEach(function(payment_btn){
payment_btn.addEventListener("click",function(){
if(this.classList.contains("monthly")){
monthly.forEach(payment_btn => payment_btn.classList.remove("active"));
this.classList.add("active");
monthly_icon.forEach(select_icon=> select_icon.classList.remove("active"));
this.querySelector(".select_icon").classList.add("active");
}
if(this.classList.contains("yearly")){
yearly.forEach(payment_btn => payment_btn.classList.remove("active"));
this.classList.add("active");
yearly_icon.forEach(select_icon=> select_icon.classList.remove("active"));
this.querySelector(".select_icon").classList.add("active");
}
});
});
</script>CSS – styles
body{
margin: 0px;
font-family: "Poppins", serif;
background:#000;
}
.container{
position: relative;
max-width: 700px;
width: 100%;
margin: 0px auto;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.inner_container{
position: relative;
max-width: 400px;
width: 100%;
padding: 15px;
border:2px solid #EAEAE9;
border-radius: 25px;
box-sizing: border-box;
background:#fff;
}
.btn{
position: relative;
max-width: 100%;
width: 100%;
padding: 6px;
box-sizing: border-box;
background: #F4F3F8;
border-radius: 30px;
text-align: center;
cursor: pointer;
display: flex;
}
.active_bg {
position: absolute;
height: calc(100% - 12px);
background: #fff;
border-radius: 25px;
transition: all .3s linear;
width: calc(50% - 6px);
}
.pricing_btn{
position: relative;
display: inline-block;
padding: 5px 15px;
font-size: 17px;
box-sizing: border-box;
font-weight: 600;
transition: all .3s linear;
text-align: center;
max-width: 50%;
width: 100%;
box-sizing: border-box;
}
.pricing{
position: relative;
margin-top: 20px;
display: none;
}
.pricing.active{
display: block;
}
.payment{
position: relative;
padding: 15px;
border: 2px solid #F3F3F2;
box-sizing: border-box;
border-radius: 15px;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
cursor: pointer;
transition: all .3s linear;
}
.payment.active{
border:2px solid #000;
}
.free h2{
position: relative;
margin: 0px;
margin-bottom: 3px;
font-weight: 500;
font-size: 20px;
}
h2 span{
position: relative;
display: inline-block;
font-size: 14px;
background: #F2EBB9;
padding: 6px 10px;
border-radius: 5px;
font-weight: normal;
}
.money{
position: relative;
display: block;
font-size: 17px;
font-weight: 500;
}
.money span{
position: relative;
display: inline-block;
font-weight: normal;
color: #838388;
}
.select_icon{
position: relative;
width: 20px;
height: 20px;
border:2px solid #838388;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.select_icon.active{
background: #000;
border:2px solid #000;
}
.select_icon.active::after{
position: absolute;
content: "";
width: 2px;
height: 6px;
background: #fff;
transform: rotate(130deg);
left: 5px;
top: 10px;
}
.select_icon.active::before{
position: absolute;
content: "";
width: 2px;
height: 13px;
background: #fff;
transform: rotate(43deg);
left: 11px;
top: 4px;
}
.action_btn{
position: relative;
max-width: 100%;
width: 100%;
padding: 12px;
border-radius: 25px;
border: 0;
background: #000;
color: #fff;
font-size: 18px;
cursor: pointer;
}
@media(max-width:768px){
.container{
max-width: 90%;
}
}Credits: Vanaja
