Categories
Html and Tailwind CSS Vertical Pricing Code Snippet | Component
This HTML and Tailwind CSS code snippet presents a versatile pricing section designed for showcasing different subscription plans. The section starts with a header titled "Our Pricing Plans" followed by a brief description. Each plan is presented within a separate container, featuring the plan name, description, list of features, and pricing details. This pricing component design ensures clarity and readability by utilizing a grid layout and consistent typography. Each plan container is visually appealing with rounded corners, shadow effects, and contrasting color schemes. Additionally, call-to-action buttons accompany each plan, facilitating easy navigation for users. Overall, the pricing code snippet design offers flexibility and scalability, making it suitable for diverse subscription-based services.
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
<div class="grid grid-cols-1 pb-8 text-center">
<h3
class="mb-4 md:text-[26px] md:leading-normal text-2xl leading-normal font-semibold"
>
Our Pricing Plans
</h3>
<p class="text-slate-400 max-w-xl mx-auto">
Launch your campaign and benefit from our expertise on designing and
managing conversion centered Tailwind css html page.
</p>
</div>
<!--end grid-->
<div class="grid grid-cols-1 mt-8 gap-[30px]">
<div
class="slate md:flex items-center justify-between p-6 rounded-lg shadow"
>
<div class="lg:flex items-center justify-between lg:w-2/4">
<div class="lg:mb-0 mb-5">
<h5 class="text-2xl font-semibold">Free</h5>
<p class="text-slate-400 lg:w-[200px] md:w-[300px] mt-2">
We offers a free month of service for new customers.
</p>
</div>
<ul class="list-none text-slate-400 md:mb-0 mb-5">
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Full Access
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Source Files
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Free Appointments
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Enhanced Security
</li>
</ul>
</div>
<div class="flex md:mb-0 mb-5">
<span class="text-xl font-semibold">$</span>
<span class="price text-4xl font-semibold mb-0">0</span>
<span class="text-xl font-semibold self-end mb-1">/mo</span>
</div>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-transparent hover:bg-slate-600 border-gray-100 hover:border-slate-600 text-slate-900 hover:text-white rounded-full"
>Signup</a
>
</div>
<!--end content-->
<div
class="slate md:flex items-center justify-between p-6 rounded-lg shadow"
>
<div class="lg:flex items-center justify-between lg:w-2/4">
<div class="lg:mb-0 mb-5">
<h5 class="text-2xl font-semibold">Starter</h5>
<p class="text-slate-400 lg:w-[200px] md:w-[300px] mt-2">
We offers a free month of service for new customers.
</p>
</div>
<ul class="list-none text-slate-400 md:mb-0 mb-5">
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Full Access
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Source Files
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Free Appointments
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Enhanced Security
</li>
</ul>
</div>
<div class="flex md:mb-0 mb-5">
<span class="text-xl font-semibold">$</span>
<span class="price text-4xl font-semibold mb-0">9</span>
<span class="text-xl font-semibold self-end mb-1">/mo</span>
</div>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-transparent hover:bg-slate-600 border-gray-100 hover:border-slate-600 text-slate-900 hover:text-white rounded-full"
>Buy Now</a
>
</div>
<!--end content-->
<div
class="slate md:flex items-center justify-between p-6 rounded-lg shadow"
>
<div class="lg:flex items-center justify-between lg:w-2/4">
<div class="lg:mb-0 mb-5">
<h5 class="text-2xl font-semibold">Business</h5>
<p class="text-slate-400 lg:w-[200px] md:w-[300px] mt-2">
We offers a free month of service for new customers.
</p>
</div>
<ul class="list-none text-slate-400 md:mb-0 mb-5">
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Full Access
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Source Files
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Free Appointments
</li>
<li class="mb-1 flex">
<i class="fas fa-check-circle text-slate-600 text-xl me-2"></i>
Enhanced Security
</li>
</ul>
</div>
<div class="flex md:mb-0 mb-5">
<span class="text-xl font-semibold">$</span>
<span class="price text-4xl font-semibold mb-0">29</span>
<span class="text-xl font-semibold self-end mb-1">/mo</span>
</div>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-transparent hover:bg-slate-600 border-gray-100 hover:border-slate-600 text-slate-900 hover:text-white rounded-full"
>Started now</a
>
</div>
<!--end content-->
</div>
<!--end-->
</div>
<!--end container-->