Home
Sophia Baker
Pricing card

Pricing card

This tailwind example is contributed by Sophia Baker, on 28-Nov-2022. Component is made with Tailwind CSS v3. similar terms for this example are Service rates, Subscription plans

Pricing

Author Sophia Baker

8.6k

Fork Fullscreen

<div class="relative py-4 xl:pt-8">
        <h3 class="text-2xl font-bold">Most popular</h3>

<div class="absolute top-0 w-[90%] border-green-300 border-b border-r rounded-br-xl pr-4 py-4 xl:pt-8">
            <h3 class="text-2xl font-bold text-transparent">Most popular</h3>
        </div>
    </div>

<div class="pt-4 p-6 xl:p-8">
        <p class="hidden font-light text-green-700 sm:text-lg">Best option for personal use &amp; for your next project.
        </p>
        <div class="flex justify-center items-baseline my-8">
            <span class="mr-2 text-5xl font-normal">$129</span>
            <span class="text-2xl">/month</span>
        </div>

<ul role="list" class="mb-8 space-y-4 text-left text-green-700">
            <li class="flex items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " 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>1000 Monthly Articles</span>
            </li>
            <li class="hidden items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " 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 class="font-semibold">$0.13 per article</span>
            </li>
            <li class="flex items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " 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>38 Niches</span>
            </li>
            <li class="flex items-center space-x-3">
                <svg class="flex-shrink-0 w-5 h-5 text-green-500 " 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>7 Languages</span>
            </li>

</ul>
        <a href="#"
            class="block text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-500 font-bold rounded-lg text-base px-5 py-2.5 text-center">Start
            Free Trial
        </a>
    </div>

</div>

Related Examples

Pricing section with tailwind css

Author:
Task Master

3 years ago

11.5k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

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

Author:
Andreas Ludvigsson

1 year ago

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

8 months ago

2k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

4 months ago

168
Simple pricing card
minimal pricing card

Author:
Anonymous

2 years ago

8.7k
Ticket Options ios 26
Ticket Options ios 26

Author:
Omer fils ELENGA

3 months ago

199
Pricing card

Author:
Laurits

3 years ago

11.1k
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.

Author:
Ayyamperumal S

1 week ago

135
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

10.3k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

8 months ago

767
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components