Bootdey

single price plan

Ready-to-use single price plan using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single Price Plan - Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    backgroundImage: {
                        'gradient-price': 'linear-gradient(90deg, #e24997, #2d2ed4)',
                        'gradient-line': 'linear-gradient(to right, #e24997, #2d2ed4)',
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-[#f5f5ff] pt-5">
    <section class="py-16 lg:py-20">
        <div class="container mx-auto px-4 max-w-7xl">
            <!-- Section Heading -->
            <div class="flex justify-center mb-12 lg:mb-16">
                <div class="w-full sm:w-2/3 lg:w-1/2">
                    <div class="text-center">
                        <h6 class="text-gray-600 text-base mb-4">Pricing Plans</h6>
                        <h3 class="text-4xl lg:text-5xl font-bold mb-4 tracking-tight">Let's find a way together</h3>
                        <p class="text-xl text-gray-600 mb-8">Appland is completely creative, lightweight, clean & super responsive app landing page.</p>
                        <div class="w-30 h-1 mx-auto rounded-md bg-gradient-line"></div>
                    </div>
                </div>
            </div>

            <!-- Pricing Cards -->
            <div class="flex flex-wrap justify-center -mx-4">
                <!-- Start Up Plan -->
                <div class="w-full sm:w-2/3 md:w-1/2 lg:w-1/3 px-4 mb-12">
                    <div class="bg-white rounded-t-lg shadow-md hover:shadow-2xl transition-shadow duration-500 px-12 sm:px-16 py-12 relative after:absolute after:content-[''] after:w-full after:h-4 after:bottom-[-17px] after:left-0 after:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxN3B4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJoYWxmY2lyY2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxjaXJjbGUgY3g9IjEwIiBjeT0iMCIgcj0iMTAiIGZpbGw9IiNmNWY1ZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE3IiBmaWxsPSJ1cmwoI2hhbGZjaXJjbGUpIi8+PC9zdmc+')] after:bg-repeat-x">
                        <!-- Title -->
                        <div class="mb-8">
                            <h3 class="text-xl font-semibold mb-2">Start Up</h3>
                            <p class="text-sm font-light text-gray-600 mb-4">Start a trial</p>
                            <div class="w-20 h-1 bg-[#3f43fd] rounded-full"></div>
                        </div>

                        <!-- Price -->
                        <div class="mb-6">
                            <h4 class="text-5xl font-bold bg-gradient-price bg-clip-text text-transparent inline-block">$0</h4>
                        </div>

                        <!-- Features -->
                        <div class="mb-6">
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Duration: 7days
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                10 Features
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#e74c3c] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                </svg>
                                No Hidden Fees
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#e74c3c] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                </svg>
                                100+ Video Tuts
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#e74c3c] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                </svg>
                                No Tools
                            </p>
                        </div>

                        <!-- Button -->
                        <div>
                            <a href="#" class="inline-block w-full text-center bg-[#2ecc71] hover:bg-[#27ae60] text-white font-medium py-3 px-8 rounded transition-colors duration-300">Get Started</a>
                        </div>
                    </div>
                </div>

                <!-- Small Business Plan (Popular) -->
                <div class="w-full sm:w-2/3 md:w-1/2 lg:w-1/3 px-4 mb-12">
                    <div class="bg-white rounded-t-lg shadow-xl hover:shadow-2xl transition-shadow duration-500 px-12 sm:px-16 py-12 relative after:absolute after:content-[''] after:w-full after:h-4 after:bottom-[-17px] after:left-0 after:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxN3B4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJoYWxmY2lyY2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxjaXJjbGUgY3g9IjEwIiBjeT0iMCIgcj0iMTAiIGZpbGw9IiNmNWY1ZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE3IiBmaWxsPSJ1cmwoI2hhbGZjaXJjbGUpIi8+PC9zdmc+')] after:bg-repeat-x">
                        <!-- Popular Badge -->
                        <div class="absolute -top-0 -right-0 z-10">
                            <img src="data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L120 0 L120 120 Z' fill='%23ffc107' opacity='0.15'/%3E%3C/svg%3E" alt="" class="w-auto h-auto">
                        </div>

                        <!-- Title -->
                        <div class="mb-8">
                            <span class="inline-block bg-[#2ecc71] text-white text-xs font-medium uppercase px-2.5 py-1 rounded mb-2">Popular</span>
                            <h3 class="text-xl font-semibold mb-2">Small Business</h3>
                            <p class="text-sm font-light text-gray-600 mb-4">For Small Business Team</p>
                            <div class="w-20 h-1 bg-[#3f43fd] rounded-full"></div>
                        </div>

                        <!-- Price -->
                        <div class="mb-6">
                            <h4 class="text-5xl font-bold bg-gradient-price bg-clip-text text-transparent inline-block">$9.99</h4>
                        </div>

                        <!-- Features -->
                        <div class="mb-6">
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Duration: 3 Month
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                50 Features
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                No Hidden Fees
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                150+ Video Tuts
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#e74c3c] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                </svg>
                                5 Tools
                            </p>
                        </div>

                        <!-- Button -->
                        <div>
                            <a href="#" class="inline-block w-full text-center bg-[#ffc107] hover:bg-[#ffb300] text-white font-medium py-3 px-8 rounded transition-colors duration-300">Get Started</a>
                        </div>
                    </div>
                </div>

                <!-- Enterprise Plan -->
                <div class="w-full sm:w-2/3 md:w-1/2 lg:w-1/3 px-4 mb-12">
                    <div class="bg-white rounded-t-lg shadow-md hover:shadow-2xl transition-shadow duration-500 px-12 sm:px-16 py-12 relative after:absolute after:content-[''] after:w-full after:h-4 after:bottom-[-17px] after:left-0 after:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxN3B4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJoYWxmY2lyY2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxjaXJjbGUgY3g9IjEwIiBjeT0iMCIgcj0iMTAiIGZpbGw9IiNmNWY1ZmYiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE3IiBmaWxsPSJ1cmwoI2hhbGZjaXJjbGUpIi8+PC9zdmc+')] after:bg-repeat-x">
                        <!-- Title -->
                        <div class="mb-8">
                            <h3 class="text-xl font-semibold mb-2">Enterprise</h3>
                            <p class="text-sm font-light text-gray-600 mb-4">Unlimited Possibilities</p>
                            <div class="w-20 h-1 bg-[#3f43fd] rounded-full"></div>
                        </div>

                        <!-- Price -->
                        <div class="mb-6">
                            <h4 class="text-5xl font-bold bg-gradient-price bg-clip-text text-transparent inline-block">$49.99</h4>
                        </div>

                        <!-- Features -->
                        <div class="mb-6">
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Duration: 1 year
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Unlimited Features
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                No Hidden Fees
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Unlimited Video Tuts
                            </p>
                            <p class="flex items-center py-2.5 text-sm">
                                <svg class="w-5 h-5 text-[#2ecc71] mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                Unlimited Tools
                            </p>
                        </div>

                        <!-- Button -->
                        <div>
                            <a href="#" class="inline-block w-full text-center bg-[#17a2b8] hover:bg-[#138496] text-white font-medium py-3 px-8 rounded transition-colors duration-300">Get Started</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>