Home
Htmlwind
Pricing section - Htmlwind

Pricing section - Htmlwind

Single pricing

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Htmlwind

717

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-4xl text-center">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Pricing plan</h2>
      <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
    </div>
    <div class="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-20 lg:ring-0">
      <div class="p-2 lg:w-full lg:max-w-sm lg:shrink-0 lg:p-0">
        <div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:py-16">
          <div class="mx-auto max-w-xs px-8">
            <p class="text-5xl font-semibold tracking-tight text-gray-900">$49.99</p>
            <h3 id="package-premium" class="mt-4 text-lg font-medium text-gray-900">Premium package</h3>
            <div class="mt-8 h-px bg-gray-900/5"></div>
            <p class="mt-8 text-sm leading-6 text-gray-600">Empowering your brand with standout visuals that leave an impact</p>
            <a href="#" aria-describedby="package-premium" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
          </div>
        </div>
      </div>
      <div class="-mt-2 p-8 sm:p-10 lg:mt-0 lg:flex-auto lg:p-0">
        <p class="text-4xl font-semibold tracking-tight text-gray-900">Process</p>
        <p class="mt-2 text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <ul class="mt-10 *:border-b *:border-gray-100 *:py-6">
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Discovery Session</span>
              – We delve deep into understanding your brand’s core values, goals, and target audience. Our aim is to align your brand’s identity with its visual representation.
            </p>
          </li>
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Custom Design Concepts</span>
              – Receive three unique design concepts tailored to your brand, with opportunities for refinement and feedback to ensure the perfect fit.
            </p>
          </li>
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Deliverables</span>
              – All final design files will be provided, including various formats suitable for both digital and print use. We ensure your brand assets are ready for immediate implementation.
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Related Examples

PLAN SECTION

Author:
ABDO-SY

9 months ago

892
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.5k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

1 year ago

2.3k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

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

Author:
Rathanak Phan

7 months ago

757
Basic pricing block

Author:
Leon Bachmann

3 years ago

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

Author:
Nicole Shalom

8 months ago

1.2k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.6k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

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

Author:
Rathanak Phan

7 months ago

1.8k
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

8 months ago

531

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components