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

7.9k

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