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 v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Nikolai

Tailwind v3.4 3.4k 7

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

Basic Pricing Cards
highlight and promote different product or service plans

Anonymous

2 years ago

7.6k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

442
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.

Hamza Atig

8 months ago

717
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

8 months ago

737
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.

Computer guy

2 years ago

8.7k
Pricing Card
A responsive pricing card build using html and tailwind css

Rajesh Maheshwari

1 year ago

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

Rathanak Phan

1 year ago

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

Nicole Shalom

1 year ago

1.8k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

7 months ago

612
PLAN SECTION

ABDO-SY

1 year ago

1.7k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Card template

Raul antonio de la cruz hernandez

8 months ago

773