Categories
Flexible website Pricing code snippet | component
This HTML and Tailwind CSS code snippet illustrates a visually appealing section for presenting pricing options. Utilizing a responsive grid layout, the section is divided into two parts: "Our Comfortable Rates" and two pricing options ("Starter" and "Professional"). The "Our Comfortable Rates" section provides a brief overview of the service and includes a call-to-action button for subscription. Each pricing option showcases the plan name, price, and a list of included features, with relevant icons for enhanced readability. This pricing component emphasizes simplicity and clarity, with contrasting colors and concise content, making it suitable for integration into various websites offering subscription-based services.
<!-- Main details begins here -->
<section class="relative">
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
<div class="grid lg:grid-cols-12 grid-cols-1 items-center gap-[30px]">
<div class="lg:col-span-5">
<div class="lg:text-start text-center">
<h3
class="mb-6 md:text-3xl text-2xl md:leading-normal leading-normal font-semibold"
>
Our Subscription Plans
</h3>
<p class="text-slate-400 max-w-xl mx-auto">
Choose the plan that suits your needs best and start enjoying
our services today.
</p>
<div class="mt-6">
<a
href="#"
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-green-600 hover:bg-green-700 border-green-600 hover:border-green-700 text-white rounded-md me-2 mt-2"
>
<i class="fas fa-credit-card"></i> Subscribe Now
</a>
</div>
</div>
</div>
<!--end col-->
<div class="lg:col-span-7 mt-8 lg:mt-0">
<div class="lg:ms-8">
<div
class="grid md:grid-cols-2 grid-cols-1 md:gap-0 gap-[30px] relative"
>
<div
class="group border-b-[3px] relative shadow rounded-md md:scale-110 z-3 bg-white"
>
<div class="p-6 py-8">
<h6 class="font-bold uppercase mb-5 text-green-600">
Basic
</h6>
<div class="flex 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>
<ul class="list-none text-slate-400">
<li class="mb-1 flex">
<i
class="fas fa-check-circle text-green-600 text-xl me-2"
></i>
Basic Features
</li>
<li class="mb-1 flex">
<i
class="fas fa-check-circle text-green-600 text-xl me-2"
></i>
Limited Support
</li>
<li class="mb-1 flex">
<i
class="fas fa-check-circle text-green-600 text-xl me-2"
></i>
Standard Security
</li>
</ul>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-green-600 hover:bg-green-700 border-green-600 hover:border-green-700 text-white rounded-md mt-5"
>
Get Started
</a>
</div>
</div>
<div
class="group border-b-[3px] relative shadow rounded-md z-1 bg-gray-50"
>
<div class="p-6 py-8 md:ps-10">
<h6 class="font-bold uppercase mb-5 text-green-600">
Premium
</h6>
<div class="flex mb-5">
<span class="text-xl font-semibold">$</span>
<span class="price text-4xl font-semibold mb-0">
49
</span>
<span class="text-xl font-semibold self-end mb-1">
/mo
</span>
</div>
<ul class="list-none text-slate-400">
<li class="mb-1 flex">
<i
class="fas fa-check-circle text-green-600 text-xl me-2"
></i>
Advanced Features
</li>
<li class="mb-1 flex">
<i
class="fas fa-check-circle text-green-600 text-xl me-2"
></i>
Priority Support
</li>
<li class="mb-1 flex">
<i
class="fas fa-check-circle text-green-600 text-xl me-2"
></i>
Enhanced Security
</li>
</ul>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-green-600 hover:bg-green-700 border-green-600 hover:border-green-700 text-white rounded-md mt-5"
>
Try it Now
</a>
</div>
</div>
</div>
</div>
</div>
<!--end col-->
</div>
<!--end grid-->
</div>
<!--end container-->
</section>
<!-- Main details ends here -->