Categories
Html and tailwind css pricing page component with gradient backgrounds
This HTML and Tailwind CSS code snippet showcases a contemporary pricing plans section suitable for various subscription or service offerings. The section begins with a visually appealing header titled "Pricing Plans" accompanied by a brief description. The plans are organized in a grid layout, with each plan displayed within its own container. Each plan container includes the plan name, pricing details, description, and a prominent call-to-action button. The design utilizes shadow effects, gradient backgrounds, and contrasting color schemes to enhance visual appeal. Additionally this pricing component has a list of key features provided for each plan, enhancing user comprehension. Overall, this code snippet design offers a modern and user-friendly interface for presenting pricing options.
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative md:mt-24 mt-16">
<div class="grid grid-cols-1 pb-8 text-center">
<h3
class="mb-4 md:text-3xl md:leading-normal text-2xl leading-normal font-semibold"
>
Pricing Plans
</h3>
<p class="text-slate-400 max-w-xl mx-auto">
Start working with Tailwind CSS that can provide everything you need
to generate awareness, drive traffic, connect.
</p>
</div>
<!--end grid-->
<div class="grid md:grid-cols-3 grid-cols-1 mt-8 gap-[30px] items-center">
<div class="p-6">
<div class="pb-8">
<h3 class="mb-6 text-xl font-medium">Free</h3>
<div class="mb-6">
<span class="relative h6 -top-5 text-xl">$</span>
<span class="text-5xl h6 font-medium">00</span>
<span class="inline-block h6 ml-1">/ month</span>
</div>
<p class="mb-6 text-slate-400">Free features for your business.</p>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600/5 hover:bg-indigo-600 border-indigo-600/10 hover:border-indigo-600 text-indigo-600 hover:text-white rounded-md w-full"
>Redeem Now</a
>
</div>
<div class="border-b border-slate-200"></div>
<ul class="self-start pt-8">
<li class="flex items-center mb-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>Complete documentation</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>Working materials in Figma</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>100GB cloud storage</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>500 team members</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>Free Support</span>
</li>
</ul>
</div>
<div
class="shadow rounded-md p-6 bg-gradient-to-t from-indigo-600 to-transparent"
>
<div class="pb-8">
<h3 class="mb-6 text-xl font-medium text-white">Business</h3>
<div class="mb-6 text-white">
<span class="relative h6 -top-5 text-xl">$</span>
<span class="text-5xl h6 font-bold text-white">10</span>
<span class="inline-block h6 ml-1">/ month</span>
</div>
<p class="mb-6 text-white">Basic features for up to 10 users.</p>
<a
href=""
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-orange-500 hover:bg-orange-600 border-orange-500 hover:border-orange-600 text-white rounded-md w-full"
>Started Now</a
>
</div>
<div class="border-b border-slate-200/10"></div>
<ul class="self-start pt-8">
<li class="flex items-center mb-1 text-white/80">
<i class="fas fa-check-circle text-xl text-orange-500 mr-2"></i>
<span>Complete documentation</span>
</li>
<li class="flex items-center my-1 text-white/80">
<i class="fas fa-check-circle text-xl text-orange-500 mr-2"></i>
<span>Working materials in Figma</span>
</li>
<li class="flex items-center my-1 text-white/80">
<i class="fas fa-check-circle text-xl text-orange-500 mr-2"></i>
<span>100GB cloud storage</span>
</li>
<li class="flex items-center my-1 text-white/80">
<i class="fas fa-check-circle text-xl text-orange-500 mr-2"></i>
<span>500 team members</span>
</li>
<li class="flex items-center my-1 text-white/80">
<i class="fas fa-check-circle text-xl text-orange-500 mr-2"></i>
<span>Free Support</span>
</li>
</ul>
</div>
<div class="p-6">
<div class="pb-8">
<h3 class="mb-6 text-xl font-medium">Corporate</h3>
<div class="mb-6">
<span class="relative h6 -top-5 text-xl">$</span>
<span class="text-5xl h6 font-medium">49</span>
<span class="inline-block h6 ml-1">/ month</span>
</div>
<p class="mb-6 text-slate-400">
Corporate features for up to 100 users.
</p>
<a
href=""
class="py-2 px-5 inline-block tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md w-full"
>Signup Now</a
>
</div>
<div class="border-b border-slate-200"></div>
<ul class="self-start pt-8">
<li class="flex items-center mb-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>Complete documentation</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>Working materialsin Figma</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>100GB cloud storage</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>500 team members</span>
</li>
<li class="flex items-center my-1 text-slate-400">
<i class="fas fa-check-circle text-xl text-indigo-600 mr-2"></i>
<span>Free Support</span>
</li>
</ul>
</div>
</div>
</div>
<!--end container-->