Home
Sienna
Basic pricing card

Basic pricing card

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

Pricing

Author Sienna

10.6k

Fork Fullscreen

<div class="relative py-6 md:mr-8 px-8 rounded-lg bg-gray-100 w-full md:w-6/12 mt-6 md:mb-0">
    <div class="flex justify-between">
        <div class="w-full">
            <div class="text-blue-900 text-lg font-medium mb-2">Lifetime</div>
            <div class="text-dark-2 text-sm leading-tight">Access forever</div>
        </div>
        <div class="text-dark-1 text-4xl leading-none text-right">
            $349<span class="ml-1 text-dark-2 text-base">/once</span></div>
    </div>
    <div class="border-b border-light-2 w-full mt-6 mb-8"></div>
    <ul class="mb-10">
        <li class="flex items-center gap-1 text-blue-900 text-sm font-medium mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24">
                <path
                    d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
            </svg>
            <span>One payment, access forever
            </span>
        </li>
        <li class="flex items-center gap-1 text-blue-900 text-sm font-medium mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" viewBox="0 0 24 24">
                <path
                    d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm5.676,8.237-6,5.5a1,1,0,0,1-1.383-.03l-3-3a1,1,0,1,1,1.414-1.414l2.323,2.323,5.294-4.853a1,1,0,1,1,1.352,1.474Z" />
            </svg>
            <span>All features and benefits
            </span>
        </li>
    </ul>
    <a class="inline-flex items-center justify-center bg-blue-400 text-white h-10 px-5 rounded-lg text-sm font-medium leading-none transition-all duration-200 whitespace-nowrap disabled:opacity-50 disabled:cursor-default hover:bg-blue-4 w-full"
        href="#">
        <span>Get started</span>
    </a>
</div>

Related Examples

Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.4k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

1 year ago

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

5 months ago

752
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

5 months ago

718
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.8k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

3 months ago

446
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

9 months ago

962
Pricing card

Author:
Laurits

2 years ago

10.7k
Minimal pricing card design

Author:
Anonymous

2 years ago

6.9k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.6k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components