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

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

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.8k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

2 years ago

7.3k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

10 months ago

608
Pricing card single

Author:
Manuela Bianka

8 months ago

545
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

5 months ago

587
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

2 months ago

360
Simple pricing cards

Author:
S. Patel

2 years ago

11.1k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.4k
SoungCraft
Used for making and trading songs

Author:
Frederick250

8 months ago

766
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

8 months ago

803
Pricing Card with Toggle

Author:
Paul Intay

1 year ago

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

Author:
Rathanak Phan

8 months ago

765

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components