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

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

payement cart virtual
payement cart virtual

Author:
Omer fils ELENGA

5 days ago

12
Clean pricing cards

Author:
Freja Jensen

3 years ago

8.2k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

7k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

2 months ago

178
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

2 years ago

3.2k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

9 months ago

722
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

1 year ago

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

10 months ago

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

2 years ago

8.8k
pricing Nos Collections du Monde
pricing Nos Collections du Monde

Author:
Omer fils ELENGA

5 days ago

10
Pricing card single

Author:
Manuela Bianka

9 months ago

566
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

9 months ago

690

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components