Design a Pricing Table in Tailwind CSS

Last Updated : 24 Jul, 2024

A pricing table in Tailwind CSS is a visually appealing way to display different subscription plans or pricing tiers for a product or service. It typically includes the name of each plan, a brief description, the monthly or yearly cost, a list of features, and a call-to-action button. Tailwind CSS provides a variety of utility classes to style the table, making it easy to create a professional-looking design that is responsive and mobile-friendly.

Approach:

First create basic HTML structure with necessary meta tags, title, and linking the Tailwind CSS library.
Create a container with Tailwind CSS classes to center the content and provide padding.
Add a title and subtitle for the pricing table.
Use a grid layout to display the pricing options in a row on larger screens and in a column on smaller screens.
Create individual pricing cards for each plan, including the plan name, price, features, and a "Buy Now" button.
Use JavaScript to provide feedback when a user clicks the "Buy Now" button, such as showing a success message at the bottom of the page for a few seconds.

Example: Implementation to create pricing table using tailwind CSS .

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0">
	<title>The Pricing Table</title>
	<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
		rel="stylesheet">
</head>

<body class="bg-gray-100">
	<div class="container mx-auto py-12">
		<h2 class="text-3xl font-bold 
				text-center text-blue-900 mb-6">
			Select Your Plan
		</h2>
		<h3 class="text-xl text-center text-blue-900 mb-8">
			C Programming Course: Beginner to Advance
		</h3>
		<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
			<div
				class="price-col border border-gray-200 
					rounded-lg p-8 flex flex-col items-center 
					justify-center text-center shadow-lg transform 
					hover:scale-105 transition-transform duration-300">
				<p class="text-lg text-blue-500 font-semibold mb-4">
					Basic
				</p>
				<hr class="w-12 border border-blue-500 mb-6">
				<h3 class="text-3xl font-bold text-blue-900 mb-6">
					₹ 500/<span class="text-lg">month</span>
				</h3>
				<ul class="text-lg text-blue-900 mb-6">
					<li>Live Online Classes</li>
					<li>Hands on Project</li>
					<li>Live Doubt Session</li>
					<li>Certificate on Completion</li>
				</ul>
				<button
					class="buy-btn bg-blue-500 hover:bg-blue-600 
						text-white font-semibold py-2 px-6 rounded-lg 
						transition duration-300 ease-in-out">Buy Now
				</button>
			</div>
			<div
				class="price-col border border-yellow-400 
					rounded-lg p-8 flex flex-col items-center 
					justify-center text-center shadow-lg transform 
					hover:scale-105 transition-transform duration-300">
				<p class="text-lg text-yellow-400 font-semibold mb-4">
					Standard*
				</p>
				<hr class="w-12 border border-yellow-400 mb-6">
				<h3 class="text-3xl font-bold text-yellow-400 mb-6">
					₹ 1000/<span class="text-lg">month</span>
				</h3>
				<ul class="text-lg text-yellow-400 mb-6">
					<li>All Basic Features</li>
					<li>Data Structure and Algorithms</li>
					<li>Memory Management in C</li>
					<li>Limit upto 2 users</li>
				</ul>
				<button
					class="buy-btn bg-yellow-400 hover:bg-yellow-500 
						text-blue-900 font-semibold py-2 px-6 rounded-lg 
						transition duration-300 ease-in-out">Buy Now
				</button>
			</div>
			<div
				class="price-col border border-green-500 rounded-lg p-8 
					flex flex-col items-center justify-center text-center 
					shadow-lg transform hover:scale-105 
					transition-transform duration-300">
				<p class="text-lg text-green-500 font-semibold mb-4">
					Premium
				</p>
				<hr class="w-12 border border-green-500 mb-6">
				<h3 class="text-3xl font-bold text-green-500 mb-6">
					₹ 1600/<span class="text-lg">month</span>
				</h3>
				<ul class="text-lg text-green-500 mb-6">
					<li>All standard Features</li>
					<li>Recorded Lectures</li>
					<li>Placement Assistance</li>
					<li>Limit upto 4 users</li>
				</ul>
				<button
					class="buy-btn bg-green-500 hover:bg-green-600 
						text-white font-semibold py-2 px-6 rounded-lg 
						transition duration-300 ease-in-out">Buy Now
				</button>
			</div>
		</div>
	</div>
	<div id="message" class="hidden fixed bottom-0 left-0 right-0 
							bg-green-500 text-white text-center py-4">
		Plan purchased successfully!
	</div>
	<script>
		const buttons = document.querySelectorAll('.buy-btn');
		const message = document.getElementById('message');
		buttons.forEach(button => {
			button.addEventListener('click', () => {
				message.classList.remove('hidden');
				setTimeout(() => {
					message.classList.add('hidden');
				}, 3000);
			});
		});
	</script>
</body>

</html>

Output:

Design a Percentage Calculator in Tailwind CSS

subramanyasmgm

Improve

Article Tags :

Design a Pricing Table in Tailwind CSS

Approach:

Similar Reads

Thank You!

What kind of Experience do you want to share?