Design a Pricing Table in Tailwind CSS
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/tailwindcss@2.2.19/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: