Home
Laurits
Pricing card with CTA

Pricing card with CTA

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

Pricing

Author Laurits

8.8k

Fork Fullscreen

<div class="border-blue-600 rounded-2xl border  divide-y divide-gray-200 max-w-sm mx-auto mt-20"
    style="box-shadow: rgba(45, 50, 130, 0.15) 0px 12px 16px -4px, rgba(45, 50, 130, 0.15) 0px 4px 6px -2px;">
    <div class="p-6">
        <div class="flex justify-between">
            <h2 class="text-lg font-semibold text-gray-600">Professional</h2>
        </div>
        <p class="mt-0.5 text-sm text-gray-500">For established companies</p>
        <p class="mt-8"><span class="text-4xl font-bold tracking-tight text-gray-900">$49</span>
            <span class="text-base font-medium text-gray-500">/mo</span>
        </p>
        <a href="#" target="_blank"
            class="flex justify-center w-full py-3 mt-4 text-sm font-medium text-white bg-indigo-600 border border-indigo-600 rounded active:text-indigo-500 hover:bg-transparent hover:text-indigo-600 focus:outline-none focus:ring">Get
            started now</a>
    </div>
    <div class="px-6 pt-6 pb-8">
        <h3 class="text-sm font-medium text-gray-900">What's included</h3>
        <ul role="list" class="mt-6 space-y-4">
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">5 workspaces</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">Unlimited testimonials</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">10 collection forms</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">20 embeddable widgets</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">White labeled widgets and forms</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">Custom branding (logo, colors, etc...)</span>
            </li>
            <li class="flex space-x-3">
                <div class="flex justify-center items-center rounded-full bg-green-100 h-5 w-5"><svg
                        xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
                        class="h-3 w-3 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M20.707 5.293a1 1 0 010 1.414l-11 11a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L9 15.586 19.293 5.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                </div>
                <span class="text-sm text-gray-500">2 members per workspace</span>
            </li>
        </ul>
    </div>
</div>

Related Examples

Fancy pricing card

Author:
Laurits

2 years ago

12.1k
Pricing Card

Author:
Amit Pachange

2 years ago

12.1k
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

7.6k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

1 year ago

11.6k
Pricing card
Reveal details on hover

Author:
Anonymous

9 months ago

2.3k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

1 month ago

271
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

4 hours ago

3
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

5 months ago

697
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

1 year ago

13.1k
Pricing card

Author:
Laurits

2 years ago

9.7k
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

1 month ago

136
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

1 month ago

105

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components