Tailwind Pricing Components in Consulty library

<section class="py-32">
    <div class="container mx-auto px-4">
        <p class="tracking-tight text-gray-600 font-medium text-center mb-4">Pricing &amp; Plan</p>
        <h1 class="font-heading tracking-tight text-4xl md:text-6xl font-medium text-center mb-16">Select a suitable plan</h1>
        <div class="flex flex-wrap -m-4 mb-16">
            <div class="w-full lg:w-1/3 p-4">
                <div class="border border-gray-100 rounded-2xl h-full">
                    <div class="p-10 bg-orange-50 rounded-tl-2xl rounded-tr-2xl">
                        <p class="text-2xl tracking-tight font-semibold mb-1">Starter Plan</p>
                        <p class="text-gray-700 tracking-tight">Best for small business or startups</p>
                    </div>
                    <div class="p-10">
                        <ul class="flex flex-col gap-4 mb-10">
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Flexible Subscription Plans</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Customizable Feature Bundles</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Free Trial Period</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Transparent Pricing Structure</span>
                            </li>
                        </ul>
                        <h2 class="tracking-tight mb-8">
                            <span class="text-5xl font-medium">$3,999</span>
                            <span class="text-gray-600">/ One time payment</span>
                        </h2>
                        <a href="#" class="bg-white h-16 w-full border border-gray-200 rounded-full px-5 py-4 inline-flex items-center justify-center gap-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <span class="tracking-tight font-bold">Choose This Plan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M14.5 6.66666H7.83333C4.88781 6.66666 2.5 9.05447 2.5 12V13.3333M14.5 6.66666L10.5 10.6667M14.5 6.66666L10.5 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="border border-gray-100 rounded-2xl h-full">
                    <div class="p-10 bg-blue-50 rounded-tl-2xl rounded-tr-2xl">
                        <p class="text-2xl tracking-tight font-semibold mb-1">Pro Plan</p>
                        <p class="text-gray-700 tracking-tight">Best for small business or startups</p>
                    </div>
                    <div class="p-10">
                        <ul class="flex flex-col gap-4 mb-10">
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Flexible Subscription Plans</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Customizable Feature Bundles</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Free Trial Period</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Transparent Pricing Structure</span>
                            </li>
                        </ul>
                        <h2 class="tracking-tight mb-8">
                            <span class="text-5xl font-medium">$6,999</span>
                            <span class="text-gray-600">/ One time payment</span>
                        </h2>
                        <a href="#" class="bg-black h-16 w-full rounded-full px-5 py-4 inline-flex items-center justify-center gap-2 hover:bg-orange-600 focus:bg-orange-500 focus:ring-4 focus:ring-orange-200 transition duration-200">
                            <span class="tracking-tight font-bold text-white">Choose This Plan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M14.5 6.66666H7.83333C4.88781 6.66666 2.5 9.05447 2.5 12V13.3333M14.5 6.66666L10.5 10.6667M14.5 6.66666L10.5 2.66666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="border border-gray-100 rounded-2xl h-full">
                    <div class="p-10 bg-green-50 rounded-tl-2xl rounded-tr-2xl">
                        <p class="text-2xl tracking-tight font-semibold mb-1">Business Plan</p>
                        <p class="text-gray-700 tracking-tight">Best for small business or startups</p>
                    </div>
                    <div class="p-10">
                        <ul class="flex flex-col gap-4 mb-10">
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Flexible Subscription Plans</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Customizable Feature Bundles</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Free Trial Period</span>
                            </li>
                            <li class="flex gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.6C17.3019 21.6 21.6 17.302 21.6 12C21.6 6.69809 17.3019 2.40002 12 2.40002C6.69806 2.40002 2.39999 6.69809 2.39999 12C2.39999 17.302 6.69806 21.6 12 21.6ZM16.4485 10.4486C16.9172 9.97992 16.9172 9.22013 16.4485 8.7515C15.9799 8.28287 15.2201 8.28287 14.7515 8.7515L10.8 12.703L9.24852 11.1515C8.77989 10.6829 8.02009 10.6829 7.55147 11.1515C7.08284 11.6201 7.08284 12.3799 7.55147 12.8486L9.95147 15.2486C10.4201 15.7172 11.1799 15.7172 11.6485 15.2486L16.4485 10.4486Z" fill="#0C0E17"></path>
                                </svg>
                                <span class="tracking-tight font-medium">Transparent Pricing Structure</span>
                            </li>
                        </ul>
                        <h2 class="tracking-tight mb-8">
                            <span class="text-5xl font-medium">$11,999</span>
                            <span class="text-gray-600">/ One time payment</span>
                        </h2>
                        <a href="#" class="bg-white h-16 w-full border border-gray-200 rounded-full px-5 py-4 inline-flex items-center justify-center gap-2 hover:bg-gray-100 focus:bg-gray-100 focus:ring-4 focus:ring-gray-200 transition duration-200">
                            <span class="tracking-tight font-bold">Choose This Plan</span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
                                <path d="M14.5 6.66666H7.83333C4.88781 6.66666 2.5 9.05447 2.5 12V13.3333M14.5 6.66666L10.5 10.6667M14.5 6.66666L10.5 2.66666" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-center justify-center flex-wrap gap-16">
            <div class="flex items-center gap-2 flex-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                    <path d="M12.5 15V17M6.5 21H18.5C19.6046 21 20.5 20.1046 20.5 19V13C20.5 11.8954 19.6046 11 18.5 11H6.5C5.39543 11 4.5 11.8954 4.5 13V19C4.5 20.1046 5.39543 21 6.5 21ZM16.5 11V7C16.5 4.79086 14.7091 3 12.5 3C10.2909 3 8.5 4.79086 8.5 7V11H16.5Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round"></path>
                </svg>
                <span class="tracking-tight">Secure Checkout</span>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                    <path d="M9.5 12L11.5 14L15.5 10M21.1179 5.98434C20.9132 5.99472 20.7072 5.99997 20.5 5.99997C17.4265 5.99997 14.623 4.84453 12.4999 2.94434C10.3769 4.84446 7.57339 5.99985 4.5 5.99985C4.29277 5.99985 4.08678 5.9946 3.88213 5.98422C3.6327 6.94783 3.5 7.95842 3.5 9.00001C3.5 14.5915 7.32432 19.2898 12.5 20.622C17.6757 19.2898 21.5 14.5915 21.5 9.00001C21.5 7.95847 21.3673 6.94791 21.1179 5.98434Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="tracking-tight">Satisfaction Guaranteed</span>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                    <path d="M17.5 8H19.5C20.6046 8 21.5 8.89543 21.5 10V16C21.5 17.1046 20.6046 18 19.5 18H17.5V22L13.5 18H9.5C8.94772 18 8.44772 17.7761 8.08579 17.4142M8.08579 17.4142L11.5 14H15.5C16.6046 14 17.5 13.1046 17.5 12V6C17.5 4.89543 16.6046 4 15.5 4H5.5C4.39543 4 3.5 4.89543 3.5 6V12C3.5 13.1046 4.39543 14 5.5 14H7.5V18L8.08579 17.4142Z" stroke="#A3A3A3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="tracking-tight">24/7 Async Support</span>
            </div>
        </div>
    </div>
</section>