Service Pricing Card

Cards including a call-to-action button for signing up

This tailwind example is contributed by Paul Intay, on 29-Feb-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Paul Intay

Tailwind v3.4 3.8k 6

Fork Fullscreen

<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6 dark:bg-gray-900">
    <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
        <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Services Offered</h2>
        <p class="mb-5 font-light text-gray-500 sm:text-xl dark:text-gray-400">
            We provide a range of different services
            tailored to meet various needs
        </p>
    </div>

<div class="space-y-8 mb-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0">
        
        <div
            class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
            <h3 class="mb-4 text-2xl font-semibold">Service A</h3>
            <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">
                Best option for individuals looking for
                personalized solutions
            </p>
            <div class="flex justify-center items-baseline my-8">
                <span class="mr-2 text-5xl font-extrabold">$49</span>
                <span class="text-gray-500 dark:text-gray-400">/month</span>
            </div>
            
            <ul role="list" class="mb-8 space-y-4 text-left">
                <li class="flex items-center space-x-3">
                    
                    <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                    <span><span class="font-semibold">3</span> Custom Features</span>
                </li>
                
            </ul>
            <a href=""
                class="text-white bg-teal-600 hover:bg-teal-700 focus:ring-4 focus:ring-teal-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white  dark:focus:ring-teal-900">Get
                started</a>
        </div>

<div
            class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
            <h3 class="mb-4 text-2xl font-semibold">Service B</h3>
            <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best for small businesses looking to
                enhance productivity</p>
            <div class="flex justify-center items-baseline my-8">
                <span class="mr-2 text-5xl font-extrabold">$79</span>
                <span class="text-gray-500 dark:text-gray-400">/month</span>
            </div>
            
            <ul role="list" class="mb-8 space-y-4 text-left">
                <li class="flex items-center space-x-3">
                    
                    <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                    <span><span class="font-semibold">5</span> Custom Features</span>
                </li>
                
            </ul>
            <a href=""
                class="text-white bg-teal-600 hover:bg-teal-700 focus:ring-4 focus:ring-teal-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white  dark:focus:ring-teal-900">Get
                started</a>
        </div>

<div
            class="flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-lg border border-gray-100 shadow dark:border-gray-600 xl:p-8 dark:bg-gray-800 dark:text-white">
            <h3 class="mb-4 text-2xl font-semibold">Service C</h3>
            <p class="font-light text-gray-500 sm:text-lg dark:text-gray-400">Best for large enterprises seeking
                comprehensive solutions</p>
            <div class="flex justify-center items-baseline my-8">
                <span class="mr-2 text-5xl font-extrabold">$199</span>
                <span class="text-gray-500 dark:text-gray-400">/month</span>
            </div>
            
            <ul role="list" class="mb-8 space-y-4 text-left">
                <li class="flex items-center space-x-3">
                    
                    <svg class="flex-shrink-0 w-5 h-5 text-green-500 dark:text-green-400" fill="currentColor"
                        viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd"></path>
                    </svg>
                    <span><span class="font-semibold">Unlimited</span> Custom Features</span>
                </li>
                
            </ul>
            <a href=""
                class="text-white bg-teal-600 hover:bg-teal-700 focus:ring-4 focus:ring-teal-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:text-white  dark:focus:ring-teal-900">Get
                started</a>
        </div>
    </div>

<div class="mx-auto max-w-screen-md text-center">
        <p class="text-lg font-medium text-gray-800 dark:text-white">Ready to get started?</p>
        <a href="" class="text-teal-600 hover:text-teal-700 dark:hover:text-teal-400 font-semibold">Sign up now</a>
    </div>
</div>

Related Examples

Pricing card

Task Master

3 years ago

9.7k
Horizontal pricing card

Anonymous

1 year ago

1.7k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

489
Pricing section
Pricing table with 3 cards for 3 plans

Leon Bachmann

3 years ago

12k
Basic Pricing Cards
highlight and promote different product or service plans

Anonymous

2 years ago

7.7k
Pricing cards in pair

Anonymous

3 years ago

8.3k
Product card

Anum Shahana

1 year ago

2k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k
Horizontal Pricing Card

Mereani Waqa

2 years ago

6.2k
Paiement Mobile MTN
Paiement Mobile MTN

Omer fils ELENGA

8 months ago

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

Christian Ahlin

1 year ago

3k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

8 months ago

1.1k