Home
Freja Jensen
Clean pricing cards

Clean pricing cards

This tailwind example is contributed by Freja Jensen, on 18-Dec-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Freja Jensen

7.3k

Fork Fullscreen

<div class="max-w-screen-lg mx-auto px-4 mt-20">
    <div class="flex flex-col gap-4 md:flex-row items-center justify-center">
        <div class="md:w-1/3 p-6 rounded-lg border">
            <h2 class="text-lg font-bold mb-2">Basic Plan</h2>
            <p class="text-gray-700 mb-4">Perfect for small teams or individuals</p>
            <p class="text-4xl font-bold mb-4">$10<span class="text-gray-500 text-lg">/month</span></p>
            <ul class="text-sm text-gray-700">
                <li>10GB Storage</li>
                <li>50GB Bandwidth</li>
                <li>5 Email Accounts</li>
                <li>24/7 Support</li>
            </ul>
            <button class="mt-8 py-3 px-6 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue transition duration-200">Get Started</button>
        </div>
        <div class="md:w-1/3 p-6 rounded-lg border">
            <h2 class="text-lg font-bold mb-2">Premium Plan</h2>
            <p class="text-gray-700 mb-4">Great for larger teams or businesses</p>
            <p class="text-4xl font-bold mb-4">$50<span class="text-gray-500 text-lg">/month</span></p>
            <ul class="text-sm text-gray-700">
                <li>100GB Storage</li>
                <li>500GB Bandwidth</li>
                <li>20 Email Accounts</li>
                <li>24/7 Support</li>
            </ul>
            <button class="mt-8 py-3 px-6 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue transition duration-200">Get Started</button>
        </div>
        <div class="md:w-1/3 p-6 rounded-lg border">
            <h2 class="text-lg font-bold mb-2">Enterprise Plan</h2>
            <p class="text-gray-700 mb-4">Custom plans for large organizations</p>
            <p class="text-4xl font-bold mb-4">$100<span class="text-gray-500 text-lg">/month</span></p>
            <ul class="text-sm text-gray-700">
                <li>Unlimited Storage</li>
                <li>Unlimited Bandwidth</li>
                <li>50 Email Accounts</li>
                <li>24/7 Support</li>
            </ul>
            <button class="mt-8 py-3 px-6 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue transition duration-200">Get Started</button>
        </div>
    </div>
</div>

Related Examples