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

10k

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

3 years ago

14.1k
Pricing Card

Author:
Amit Pachange

3 years ago

13.4k
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

2 years ago

9.5k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

8 months ago

718
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

2.6k
Basic pricing card

Author:
Sienna

3 years ago

11.5k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

2 years ago

3.8k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

2 years ago

11.7k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

231
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

10 months ago

1.1k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

3 months ago

365
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

2 years ago

7.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components