Home
Nikolai
Subscription Plan Section

Subscription Plan Section

Clean and modern Subscription Plan section

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

Pricing

Author Nikolai

2.2k

Fork Fullscreen

<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
  <div class="relative z-10 mx-auto max-w-md lg:max-w-5xl">
    <div class="mt-16 rounded-lg bg-gray-900 px-6 py-8 shadow-2xl shadow-violet-600/10 sm:p-10 lg:flex lg:items-center">
      <div class="lg:w-0 lg:flex-1">
        <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
          Pricing Plans
        </h2>
        <p class="mt-4 max-w-3xl text-lg text-gray-300">
          Choose the plan that works best for you and your team.
        </p>
      </div>
      <div class="mt-12 sm:mt-16 lg:mt-0 lg:ml-8 lg:flex-shrink-0">
        <div class="flex rounded-full shadow-sm">
          <button
      type="button"
      class="relative inline-flex items-center rounded-l-full border border-transparent bg-gradient-to-r from-violet-500 to-indigo-600 px-6 py-3 text-sm font-medium text-white hover:from-violet-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2"
    >
      Monthly
    </button>
          <button
      type="button"
      class="relative inline-flex items-center rounded-r-full border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2"
    >
      Yearly
    </button>
        </div>
      </div>
    </div>
    <div
      class="mt-8 rounded-lg bg-white pb-12 shadow sm:mt-12 sm:pb-16 lg:rounded-none lg:pb-0 lg:shadow-none lg:ring-1 lg:ring-black lg:ring-opacity-5">
      <div class="relative mx-auto max-w-md px-6 sm:max-w-3xl sm:px-4 lg:max-w-7xl lg:px-8">
        <div class="relative mt-8 mx-auto max-w-md space-y-4 lg:grid lg:max-w-5xl lg:grid-cols-2 lg:gap-5 lg:space-y-0">
          <div class="flex flex-col rounded-lg">
            <div class="px-6 py-8 sm:p-10 sm:pb-6">
              <div>
                <span class="inline-flex rounded-full bg-violet-100 px-3 py-1 text-sm font-semibold text-violet-600">
                  Standard
                </span>
              </div>
              <div class="mt-4 flex items-baseline text-6xl font-extrabold">
                $49
                <span class="ml-1 text-2xl font-medium text-gray-500">
                  /mo
                </span>
              </div>
              <p class="mt-5 text-lg text-gray-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit
                distinctio!
              </p>
              <button
                type="button"
                class="mt-8 block w-full rounded-md bg-gradient-to-r from-violet-600 to-indigo-600 py-3 px-5 font-medium text-white shadow hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 focus:ring-offset-violet-200"
              >
                Buy Standard
              </button>
            </div>
            <div class="flex flex-1 flex-col justify-between rounded-b-lg bg-gray-50 p-6 sm:p-10 sm:pb-6">
              <ul role="list" class="space-y-4">
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Pariatur quod similique
                  </p>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Veritatis expedita eligendi
                  </p>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Accusamus quia totam
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div class="flex flex-col rounded-lg">
            <div class="px-6 py-8 sm:p-10 sm:pb-6">
              <div>
                <span class="inline-flex rounded-full bg-violet-100 px-3 py-1 text-sm font-semibold text-violet-600">
                  Premium
                </span>
              </div>
              <div class="mt-4 flex items-baseline text-6xl font-extrabold">
                $99
                <span class="ml-1 text-2xl font-medium text-gray-500">
                  /mo
                </span>
              </div>
              <p class="mt-5 text-lg text-gray-500">
                Lorem ipsum dolor sit amet consectetur adipisicing elit
                distinctio!
              </p>
              <button
                type="button"
                class="mt-8 block w-full rounded-md bg-gradient-to-r from-violet-600 to-indigo-600 py-3 px-5 font-medium text-white shadow hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2 focus:ring-offset-violet-200"
              >
                Buy Premium
              </button>
            </div>
            <div class="flex flex-1 flex-col justify-between rounded-b-lg bg-gray-50 p-6 sm:p-10 sm:pb-6">
              <ul role="list" class="space-y-4">
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Pariatur quod similique
                  </p>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Veritatis expedita eligendi
                  </p>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Accusamus quia totam
                  </p>
                </li>
                <li class="flex items-start">
                  <div class="flex-shrink-0">
                    <svg class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                      stroke="currentColor" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <p class="ml-3 text-sm text-gray-700">
                    Reiciendis adipisci illum
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

10.8k
Pricing card for subscription

Author:
Task Master

2 years ago

10.6k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

2 months ago

526
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.3k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

190
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.9k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

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

Author:
Anonymous

1 year ago

6.1k
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

6 months ago

554
PLAN SECTION

Author:
ABDO-SY

2 months ago

274
Product / Service pricing section

Author:
Sophia Baker

2 years ago

11.9k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

1 month ago

22

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components