Home
Paul Intay
Service Pricing Card

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Paul Intay

3.2k

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

3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

2 years ago

3.8k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

8 months ago

909
Card
Card

Author:
Aman kumar

1 year ago

2.6k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Author:
Alif Bima Pradana

1 month ago

136
Card Princing

Author:
Raul antonio de la cruz hernandez

2 months ago

56
Pricing Plans

Author:
ariaw

6 months ago

515
pricing Nos Collections du Monde
pricing Nos Collections du Monde

Author:
Omer fils ELENGA

5 days ago

10
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

9 months ago

2k
partql
partql

Author:
sh22gr

1 month ago

171
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

Author:
SHARIFUL ISLAM

1 year ago

1.7k
Clean pricing cards

Author:
Freja Jensen

3 years ago

8.2k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

2 years ago

3.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components