Tailwind CSS Pricing Tables Components
Pricing Tables coded in Tailwind CSS, having pricing section is essential for a website when it's are showcasing a product or product and ready to purchase. Pricing Tables Tailwind components are essential for your website, especially if it deals with ecommerce. It can also come in handy for service providers. So, if you are looking for an interesting pricing table template based on Tailwind CSS UI components, you have come to the right place! You can check out the ten pricing table designs offered by TailsGrid. Moreover, you can use one of them for free while other styles fall under the Pro category. All the pricing tables offered by TailGrid are coded in Tailwind CSS. You can opt for the PRO version for amazing pricing table templates that are designed to attract your customers. These templates are the perfect way for you to make one or more of your products ready for purchase on your website so that your customers have no problems making a purchase. Therefore, you can even go for the PRO version as it is an investment at the end of the day.
Pricing Style 1
FREE
FREE
Pricing Style 1<!-- ====== Pricing Section Start -->
<section
class="relative z-20 overflow-hidden bg-white pt-20 pb-12 lg:pt-[120px] lg:pb-[90px]"
>
<div class="container mx-auto">
<div class="-mx-4 flex flex-wrap">
<div class="w-full px-4">
<div class="mx-auto mb-[60px] max-w-[510px] text-center lg:mb-20">
<span class="text-primary mb-2 block text-lg font-semibold">
Pricing Table
</span>
<h2
class="text-dark mb-4 text-3xl font-bold sm:text-4xl md:text-[40px]"
>
Our Pricing Plan
</h2>
<p class="text-body-color text-base">
There are many variations of passages of Lorem Ipsum available but
the majority have suffered alteration in some form.
</p>
</div>
</div>
</div>
<div class="-mx-4 flex flex-wrap justify-center">
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div
class="border-primary shadow-pricing relative z-10 mb-10 overflow-hidden rounded-xl border border-opacity-20 bg-white py-10 px-8 sm:p-12 lg:py-10 lg:px-6 xl:p-12"
>
<span class="text-primary mb-4 block text-lg font-semibold">
Personal
</span>
<h2 class="text-dark mb-5 text-[42px] font-bold">
$59
<span class="text-body-color text-base font-medium"> / year </span>
</h2>
<p
class="text-body-color mb-8 border-b border-[#F2F2F2] pb-8 text-base"
>
Perfect for using in a personal website or a client project.
</p>
<div class="mb-7">
<p class="text-body-color mb-1 text-base leading-loose">1 User</p>
<p class="text-body-color mb-1 text-base leading-loose">
All UI components
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Lifetime access
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Free updates
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Use on 1 (one) project
</p>
<p class="text-body-color mb-1 text-base leading-loose">
3 Months support
</p>
</div>
<a
href="javascript:void(0)"
class="text-primary hover:bg-primary hover:border-primary block w-full rounded-md border border-[#D4DEFF] bg-transparent p-4 text-center text-base font-semibold transition hover:text-white"
>
Choose Personal
</a>
<div>
<span class="absolute right-0 top-7 z-[-1]">
<svg
width="77"
height="172"
viewBox="0 0 77 172"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
<defs>
<linearGradient
id="paint0_linear"
x1="86"
y1="0"
x2="86"
y2="172"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3056D3" stop-opacity="0.09" />
<stop offset="1" stop-color="#C4C4C4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
<span class="absolute right-4 top-4 z-[-1]">
<svg
width="41"
height="89"
viewBox="0 0 41 89"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="38.9138"
cy="87.4849"
r="1.42021"
transform="rotate(180 38.9138 87.4849)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="74.9871"
r="1.42021"
transform="rotate(180 38.9138 74.9871)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="62.4892"
r="1.42021"
transform="rotate(180 38.9138 62.4892)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="38.3457"
r="1.42021"
transform="rotate(180 38.9138 38.3457)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="13.634"
r="1.42021"
transform="rotate(180 38.9138 13.634)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="50.2754"
r="1.42021"
transform="rotate(180 38.9138 50.2754)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="26.1319"
r="1.42021"
transform="rotate(180 38.9138 26.1319)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="1.42021"
r="1.42021"
transform="rotate(180 38.9138 1.42021)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="87.4849"
r="1.42021"
transform="rotate(180 26.4157 87.4849)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="74.9871"
r="1.42021"
transform="rotate(180 26.4157 74.9871)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="62.4892"
r="1.42021"
transform="rotate(180 26.4157 62.4892)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="38.3457"
r="1.42021"
transform="rotate(180 26.4157 38.3457)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="13.634"
r="1.42021"
transform="rotate(180 26.4157 13.634)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="50.2754"
r="1.42021"
transform="rotate(180 26.4157 50.2754)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="26.1319"
r="1.42021"
transform="rotate(180 26.4157 26.1319)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="1.4202"
r="1.42021"
transform="rotate(180 26.4157 1.4202)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="87.4849"
r="1.42021"
transform="rotate(180 13.9177 87.4849)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="74.9871"
r="1.42021"
transform="rotate(180 13.9177 74.9871)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="62.4892"
r="1.42021"
transform="rotate(180 13.9177 62.4892)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="38.3457"
r="1.42021"
transform="rotate(180 13.9177 38.3457)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="13.634"
r="1.42021"
transform="rotate(180 13.9177 13.634)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="50.2754"
r="1.42021"
transform="rotate(180 13.9177 50.2754)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="26.1319"
r="1.42021"
transform="rotate(180 13.9177 26.1319)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="1.42019"
r="1.42021"
transform="rotate(180 13.9177 1.42019)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="87.4849"
r="1.42021"
transform="rotate(180 1.41963 87.4849)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="74.9871"
r="1.42021"
transform="rotate(180 1.41963 74.9871)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="62.4892"
r="1.42021"
transform="rotate(180 1.41963 62.4892)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="38.3457"
r="1.42021"
transform="rotate(180 1.41963 38.3457)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="13.634"
r="1.42021"
transform="rotate(180 1.41963 13.634)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="50.2754"
r="1.42021"
transform="rotate(180 1.41963 50.2754)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="26.1319"
r="1.42021"
transform="rotate(180 1.41963 26.1319)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="1.4202"
r="1.42021"
transform="rotate(180 1.41963 1.4202)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div
class="border-primary shadow-pricing relative z-10 mb-10 overflow-hidden rounded-xl border border-opacity-20 bg-white py-10 px-8 sm:p-12 lg:py-10 lg:px-6 xl:p-12"
>
<span class="text-primary mb-4 block text-lg font-semibold">
Business
</span>
<h2 class="text-dark mb-5 text-[42px] font-bold">
$199
<span class="text-body-color text-base font-medium"> / year </span>
</h2>
<p
class="text-body-color mb-8 border-b border-[#F2F2F2] pb-8 text-base"
>
Perfect for using in a Business website or a client project.
</p>
<div class="mb-7">
<p class="text-body-color mb-1 text-base leading-loose">5 Users</p>
<p class="text-body-color mb-1 text-base leading-loose">
All UI components
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Lifetime access
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Free updates
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Use on 3 (Three) project
</p>
<p class="text-body-color mb-1 text-base leading-loose">
4 Months support
</p>
</div>
<a
href="javascript:void(0)"
class="bg-primary border-primary block w-full rounded-md border p-4 text-center text-base font-semibold text-white transition hover:bg-opacity-90"
>
Choose Business
</a>
<div>
<span class="absolute right-0 top-7 z-[-1]">
<svg
width="77"
height="172"
viewBox="0 0 77 172"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
<defs>
<linearGradient
id="paint0_linear"
x1="86"
y1="0"
x2="86"
y2="172"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3056D3" stop-opacity="0.09" />
<stop offset="1" stop-color="#C4C4C4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
<span class="absolute right-4 top-4 z-[-1]">
<svg
width="41"
height="89"
viewBox="0 0 41 89"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="38.9138"
cy="87.4849"
r="1.42021"
transform="rotate(180 38.9138 87.4849)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="74.9871"
r="1.42021"
transform="rotate(180 38.9138 74.9871)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="62.4892"
r="1.42021"
transform="rotate(180 38.9138 62.4892)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="38.3457"
r="1.42021"
transform="rotate(180 38.9138 38.3457)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="13.634"
r="1.42021"
transform="rotate(180 38.9138 13.634)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="50.2754"
r="1.42021"
transform="rotate(180 38.9138 50.2754)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="26.1319"
r="1.42021"
transform="rotate(180 38.9138 26.1319)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="1.42021"
r="1.42021"
transform="rotate(180 38.9138 1.42021)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="87.4849"
r="1.42021"
transform="rotate(180 26.4157 87.4849)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="74.9871"
r="1.42021"
transform="rotate(180 26.4157 74.9871)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="62.4892"
r="1.42021"
transform="rotate(180 26.4157 62.4892)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="38.3457"
r="1.42021"
transform="rotate(180 26.4157 38.3457)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="13.634"
r="1.42021"
transform="rotate(180 26.4157 13.634)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="50.2754"
r="1.42021"
transform="rotate(180 26.4157 50.2754)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="26.1319"
r="1.42021"
transform="rotate(180 26.4157 26.1319)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="1.4202"
r="1.42021"
transform="rotate(180 26.4157 1.4202)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="87.4849"
r="1.42021"
transform="rotate(180 13.9177 87.4849)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="74.9871"
r="1.42021"
transform="rotate(180 13.9177 74.9871)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="62.4892"
r="1.42021"
transform="rotate(180 13.9177 62.4892)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="38.3457"
r="1.42021"
transform="rotate(180 13.9177 38.3457)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="13.634"
r="1.42021"
transform="rotate(180 13.9177 13.634)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="50.2754"
r="1.42021"
transform="rotate(180 13.9177 50.2754)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="26.1319"
r="1.42021"
transform="rotate(180 13.9177 26.1319)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="1.42019"
r="1.42021"
transform="rotate(180 13.9177 1.42019)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="87.4849"
r="1.42021"
transform="rotate(180 1.41963 87.4849)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="74.9871"
r="1.42021"
transform="rotate(180 1.41963 74.9871)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="62.4892"
r="1.42021"
transform="rotate(180 1.41963 62.4892)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="38.3457"
r="1.42021"
transform="rotate(180 1.41963 38.3457)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="13.634"
r="1.42021"
transform="rotate(180 1.41963 13.634)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="50.2754"
r="1.42021"
transform="rotate(180 1.41963 50.2754)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="26.1319"
r="1.42021"
transform="rotate(180 1.41963 26.1319)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="1.4202"
r="1.42021"
transform="rotate(180 1.41963 1.4202)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
<div class="w-full px-4 md:w-1/2 lg:w-1/3">
<div
class="border-primary shadow-pricing relative z-10 mb-10 overflow-hidden rounded-xl border border-opacity-20 bg-white py-10 px-8 sm:p-12 lg:py-10 lg:px-6 xl:p-12"
>
<span class="text-primary mb-4 block text-lg font-semibold">
Professional
</span>
<h2 class="text-dark mb-5 text-[42px] font-bold">
$256
<span class="text-body-color text-base font-medium"> / year </span>
</h2>
<p
class="text-body-color mb-8 border-b border-[#F2F2F2] pb-8 text-base"
>
Perfect for using in a Professional website or a client project.
</p>
<div class="mb-7">
<p class="text-body-color mb-1 text-base leading-loose">
Unlimited Users
</p>
<p class="text-body-color mb-1 text-base leading-loose">
All UI components
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Lifetime access
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Free updates
</p>
<p class="text-body-color mb-1 text-base leading-loose">
Use on Unlimited project
</p>
<p class="text-body-color mb-1 text-base leading-loose">
12 Months support
</p>
</div>
<a
href="javascript:void(0)"
class="text-primary hover:bg-primary hover:border-primary block w-full rounded-md border border-[#D4DEFF] bg-transparent p-4 text-center text-base font-semibold transition hover:text-white"
>
Choose Professional
</a>
<div>
<span class="absolute right-0 top-7 z-[-1]">
<svg
width="77"
height="172"
viewBox="0 0 77 172"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="86" cy="86" r="86" fill="url(#paint0_linear)" />
<defs>
<linearGradient
id="paint0_linear"
x1="86"
y1="0"
x2="86"
y2="172"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#3056D3" stop-opacity="0.09" />
<stop offset="1" stop-color="#C4C4C4" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
<span class="absolute right-4 top-4 z-[-1]">
<svg
width="41"
height="89"
viewBox="0 0 41 89"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="38.9138"
cy="87.4849"
r="1.42021"
transform="rotate(180 38.9138 87.4849)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="74.9871"
r="1.42021"
transform="rotate(180 38.9138 74.9871)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="62.4892"
r="1.42021"
transform="rotate(180 38.9138 62.4892)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="38.3457"
r="1.42021"
transform="rotate(180 38.9138 38.3457)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="13.634"
r="1.42021"
transform="rotate(180 38.9138 13.634)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="50.2754"
r="1.42021"
transform="rotate(180 38.9138 50.2754)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="26.1319"
r="1.42021"
transform="rotate(180 38.9138 26.1319)"
fill="#3056D3"
/>
<circle
cx="38.9138"
cy="1.42021"
r="1.42021"
transform="rotate(180 38.9138 1.42021)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="87.4849"
r="1.42021"
transform="rotate(180 26.4157 87.4849)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="74.9871"
r="1.42021"
transform="rotate(180 26.4157 74.9871)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="62.4892"
r="1.42021"
transform="rotate(180 26.4157 62.4892)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="38.3457"
r="1.42021"
transform="rotate(180 26.4157 38.3457)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="13.634"
r="1.42021"
transform="rotate(180 26.4157 13.634)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="50.2754"
r="1.42021"
transform="rotate(180 26.4157 50.2754)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="26.1319"
r="1.42021"
transform="rotate(180 26.4157 26.1319)"
fill="#3056D3"
/>
<circle
cx="26.4157"
cy="1.4202"
r="1.42021"
transform="rotate(180 26.4157 1.4202)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="87.4849"
r="1.42021"
transform="rotate(180 13.9177 87.4849)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="74.9871"
r="1.42021"
transform="rotate(180 13.9177 74.9871)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="62.4892"
r="1.42021"
transform="rotate(180 13.9177 62.4892)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="38.3457"
r="1.42021"
transform="rotate(180 13.9177 38.3457)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="13.634"
r="1.42021"
transform="rotate(180 13.9177 13.634)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="50.2754"
r="1.42021"
transform="rotate(180 13.9177 50.2754)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="26.1319"
r="1.42021"
transform="rotate(180 13.9177 26.1319)"
fill="#3056D3"
/>
<circle
cx="13.9177"
cy="1.42019"
r="1.42021"
transform="rotate(180 13.9177 1.42019)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="87.4849"
r="1.42021"
transform="rotate(180 1.41963 87.4849)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="74.9871"
r="1.42021"
transform="rotate(180 1.41963 74.9871)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="62.4892"
r="1.42021"
transform="rotate(180 1.41963 62.4892)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="38.3457"
r="1.42021"
transform="rotate(180 1.41963 38.3457)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="13.634"
r="1.42021"
transform="rotate(180 1.41963 13.634)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="50.2754"
r="1.42021"
transform="rotate(180 1.41963 50.2754)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="26.1319"
r="1.42021"
transform="rotate(180 1.41963 26.1319)"
fill="#3056D3"
/>
<circle
cx="1.41963"
cy="1.4202"
r="1.42021"
transform="rotate(180 1.41963 1.4202)"
fill="#3056D3"
/>
</svg>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ====== Pricing Section End -->
Pricing Style 3
PRO
PRO
Pricing Style 3
Pricing Style 4
PRO
PRO
Pricing Style 4
Pricing Style 2
PRO
PRO
Pricing Style 2
Pricing Style 9
PRO
PRO
Pricing Style 9
Pricing Style 6
PRO
PRO
Pricing Style 6
Pricing Style 7
PRO
PRO
Pricing Style 7
Pricing Style 8
PRO
PRO
Pricing Style 8
Pricing Style 5
PRO
PRO
Pricing Style 5
Pricing Style 10
PRO
PRO
Pricing Style 10