<div class="plan">
	<button class="btn active" data-plan="sync">
		Sync
	</button>
	<button class="btn" data-plan="insights">
		insights
	</button>
</div>
<div class="payment">
	<button class="btn active" data-payment="monthly">
		<span class="btn__text">monthly</span>
	</button>
	<button class="btn" data-payment="yearly">
		<span class="btn__text">yearly</span>
	</button>
</div>
<div class="pricing__w">
	<div class="card">
		<div class="card__top">
			<h2 class="card__title">Basic</h2>
			<p class="card__price">$0</p>
			<p class="card__users">per user</p>
		</div>
		<button class="btn btn--block">Choose plan</button>
	</div>
	<div class="card">
		<div class="card__top">
			<h2 class="card__title">Medium</h2>
			<p class="card__price">$0</p>
			<p class="card__users">per user</p>
		</div>

		<button class="btn btn--block">Choose plan</button>
	</div>
	<div class="card">
		<div class="card__top">
			<h2 class="card__title">Scale</h2>
			<p class="card__price">$0</p>
			<p class="card__users">per user</p>
		</div>

		<button class="btn btn--block">Choose plan</button>
	</div>
</div>
.plan,
.payment {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	width: 100%;
	padding: 2rem 0;
	& .btn {
		width: 200px;
		height: 50px;
		color: rgb(90, 90, 90);
		border: none;
		border-radius: 5px;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
		transition: all 0.3s ease;

		&:hover {
			background-color: #865af6;
			color: #d3c1ff;
			border: 1px solid #d3c1ff;
		}
	}
}
.btn.active {
	background-color: rgb(0, 0, 0);
	color: rgb(245, 245, 245);
	border: none;
}
.pricing__w {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
	@media (max-width: 768px) {
		flex-direction: column;
	}
	& .card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px rgba(94, 94, 94, 0.2);
		transition: all 0.3s ease;
		& .card__title {
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 20px;
		}
		& .card__price {
			font-size: 40px;
			font-weight: 700;
			margin-bottom: 20px;
		}
		& .btn {
			width: 100%;
			height: 50px;
			background-color: #000;
			color: #fff;
			border: none;
			border-radius: 5px;
			font-size: 16px;
			font-weight: 700;
			cursor: pointer;
			transition: all 0.3s ease;
			&:hover {
				background-color: #865af6;
				color: #d3c1ff;
				border: 1px solid #d3c1ff;
			}
		}
	}
}
const planButtons = [...document.querySelectorAll("[data-plan]")];
const paymentButtons = [...document.querySelectorAll("[data-payment]")];
const priceElms = [...document.querySelectorAll(".card__price")];

// INIT values
const pricingSyncMonthy = [48, 88, 220];
const pricingInsightsMonthy = [96, 160, 340];
const sale = 0.2;
let currPlan = "sync";
let payment = "monthly";

// set init price for each card
priceElms.forEach((priceElm, index) => {
	if (currPlan === "sync") {
		priceElm.textContent = pricingSyncMonthy[index];
	} else {
		priceElm.textContent = pricingInsightsMonthy[index];
	}
});

// change price when click on plan button
for (const button of planButtons) {
	button.addEventListener("click", function (event) {
		currPlan = event.currentTarget.dataset.plan;
		toggleActiveClass(planButtons, currPlan);
		if (currPlan === "sync" && payment === "monthly") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = pricingSyncMonthy[index];
			});
		}
		if (currPlan === "sync" && payment === "yearly") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = Math.round(pricingSyncMonthy[index] * (1 - sale));
			});
		}
		if (currPlan === "insights" && payment === "yearly") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = Math.round(
					pricingInsightsMonthy[index] * (1 - sale)
				);
			});
		}

		if (currPlan === "insights" && payment === "monthly") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = pricingInsightsMonthy[index];
			});
		}
	});
}

// change price to sale when click on yearly button

for (const button of paymentButtons) {
	button.addEventListener("click", function (event) {
		payment = event.currentTarget.dataset.payment;
		toggleActiveClass(paymentButtons, payment);
		if (payment === "monthly" && currPlan === "sync") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = pricingSyncMonthy[index];
			});
		}
		if (payment === "yearly" && currPlan === "sync") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = Math.round(pricingSyncMonthy[index] * (1 - sale));
			});
		}
		if (payment === "yearly" && currPlan === "insights") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = Math.round(
					pricingInsightsMonthy[index] * (1 - sale)
				);
			});
		}

		if (payment === "monthly" && currPlan === "insights") {
			priceElms.forEach((priceElm, index) => {
				priceElm.textContent = pricingInsightsMonthy[index];
			});
		}
	});
}

// toggle active class
function toggleActiveClass(elements, currPlan) {
	elements.forEach((element) => {
		if (
			element.dataset.plan === currPlan ||
			element.dataset.payment === currPlan
		) {
			element.classList.add("active");
		} else {
			element.classList.remove("active");
		}
	});
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.