Tailwind CSS Subscription Section for Services & Plans
Tailwind CSS Subscription Section for Services & Plans
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<title>Tailwind CSS Subscription Section for Services & Plans</title>
<style>
body {
font-family: Poppins, sans-serif;
}
</style>
</head>
<body class="bg-[#f8f9ff] max-w-[1920px] mx-auto">
<div class="bg-[#f8f9ff] text-black text-[15px]">
<div class="px-4 sm:px-10">
<div class="mt-32 max-w-7xl mx-auto">
<div class="text-center">
<h2 class="md:text-4xl text-3xl font-extrabold">Choose a Subscription</h2>
</div>
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-8 mt-16 max-md:max-w-lg max-md:mx-auto">
<div class="bg-white rounded sm:p-6 p-4">
<h3 class="text-xl font-semibold">Free</h3>
<p class="mt-2">Ideal for individuals who need quick access to basic features.</p>
<div class="mt-6">
<h2 class="text-4xl font-semibold">$0<span class="text-gray-500 ml-2 text-[15px]">/ Month</span></h2>
<button type="button"
class="w-full mt-6 px-6 py-3 rounded-xl text-white bg-cyan-900 transition-all hover:bg-cyan-800">Get
Started</button>
</div>
<div class="mt-6">
<h4 class="text-base font-bold mb-4">Plan Includes</h4>
<ul class="space-y-5">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
50 Image generations
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
500 Credits
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Monthly 100 Credits Free
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Customer Support
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Dedicated Server
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Priority Generations
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
50GB Cloud Storage
</li>
</ul>
</div>
</div>
<div class="bg-blue-600 rounded sm:p-6 p-4 text-white shadow-lg shadow-blue-300">
<h3 class="text-xl font-semibold">Professional</h3>
<p class="mt-2">Ideal for individuals who who need advanced features and tools for client work.</p>
<div class="mt-6">
<h2 class="text-4xl font-semibold">$25<span class="text-gray-200 ml-2 text-[15px]">/ Month</span></h2>
<button type="button"
class="w-full mt-6 px-6 py-3 rounded-xl text-black bg-white transition-all hover:bg-gray-100">Get
Started</button>
</div>
<div class="mt-6">
<h4 class="text-base font-bold mb-4">Plan Includes</h4>
<ul class="space-y-5">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
500 Image generations
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
300 Credits
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Monthly 1000 Credits Free
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Customer Support
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Dedicated Server
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Priority Generations
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-white" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
500GB Cloud Storage
</li>
</ul>
</div>
</div>
<div class="bg-white rounded sm:p-6 p-4">
<h3 class="text-xl font-semibold">Enterprise</h3>
<p class="mt-2">Ideal for businesses who need personalized services and security for large teams.</p>
<div class="mt-6">
<h2 class="text-4xl font-semibold">$100<span class="text-gray-500 ml-2 text-[15px]">/ Month</span></h2>
<button type="button"
class="w-full mt-6 px-6 py-3 rounded-xl text-white bg-cyan-900 transition-all hover:bg-cyan-800">Get
Started</button>
</div>
<div class="mt-6">
<h4 class="text-base font-bold mb-4">Plan Includes</h4>
<ul class="space-y-5">
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
5000 Image generations
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
10000 Credits
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Monthly 2000 Credits Free
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Customer Support
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Dedicated Server
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
Priority Generations
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" class="mr-4 fill-green-500" viewBox="0 0 24 24">
<path
d="M9.707 19.121a.997.997 0 0 1-1.414 0l-5.646-5.647a1.5 1.5 0 0 1 0-2.121l.707-.707a1.5 1.5 0 0 1 2.121 0L9 14.171l9.525-9.525a1.5 1.5 0 0 1 2.121 0l.707.707a1.5 1.5 0 0 1 0 2.121z"
data-original="#000000" />
</svg>
1000GB Cloud Storage
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
/* Doesn't require any CSS. */
//Doesn't require any JS.
This Tailwind CSS snippet showcases a clean, responsive, and visually appealing subscription section designed to present various services and pricing plans. It effectively highlights different tiers with their respective features and costs, encouraging users to choose the option best suited for their needs.
Key Features:
- Responsive Design: The entire subscription section adapts fluidly to different screen sizes, ensuring optimal readability and interaction on desktops, tablets, and mobile devices.
- Tiered Pricing Display: Clearly presents multiple pricing tiers (e.g., Free, Professional, Enterprise) with distinct styling for easy comparison.
- Clear Call-to-Action: Features prominent "Get Started" buttons for each plan, guiding users directly to the subscription process.
- Customizable Styling: Easily modify the appearance of the pricing cards, buttons, and text using Tailwind CSS utility classes to perfectly match your website's branding.
Implementation:
- Include Tailwind CSS: Ensure that Tailwind CSS is installed and properly configured in your project.
- Create the HTML Structure: Define the HTML structure for the subscription section, typically using a main container and individual div elements for each pricing card. Include headings for plan names, prices, feature lists, and buttons.
- Apply Tailwind CSS Classes: Utilize Tailwind CSS utility classes extensively for styling, including grid or flexbox for layout, background colors, text styles, padding, margins, and button appearance.
- Populate Content: Fill in the specific plan names, prices, descriptions, and feature lists for each tier.
By following these steps, you can seamlessly integrate a responsive and highly effective subscription section into your Tailwind CSS project, clearly presenting your services and plans to drive user sign-ups and conversions.
Latest Snippets
View All
Join Our Community Call-to-Action Banner Section With Tailwind CSS
Bootstrap 5 Responsive Service Pricing Table Block
Owl Carousel Responsive CSS-Only Team Section Showcase
Tailwind CSS Subscribe Container with Integrated Footer
Responsive Bootstrap 5 Detailed Features Section
Responsive CSS-Only Glassmorphism Login Form with background image
Responsive Tailwind CSS Hero Section and Adaptive Navbar
Responsive Bootstrap 5 Compact FAQ Accordion Display
Responsive CSS Only Services Section with Hover Effects
Responsive Tailwind CSS Team Members Display Showcase
Responsive Bootstrap 5 Clear Process Flow Component
Responsive Interactive Login & Register Form with CSS & JS Transitions
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
