Home
Ahmath S.
pricing card

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 ,

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

Card Pricing eCommerce

Author Ahmath S.

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/dist/style.css" />
  </head>
  <body class="bg-gray-50">
    <div class="max-w-7xl mx-auto p-10">

<div class="text-center mb-10">
        <h2 class="text-4xl font-bold text-gray-800">Choose Your Plan</h2>
        <p class="text-gray-500 mt-2">
          Select the plan that best fits your needs
        </p>
      </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">

<div
          class="w-full p-6 border border-gray-200 rounded-lg border-t-blue-500 border-t-4 shadow hover:shadow-xl transition"
        >
          <h4 class="mb-4 text-3xl">Standart Plan</h4>
          <div>
            <span class="text-3xl font-semibold">$</span>
            <span class="text-5xl font-semibold">29</span>
            <span class="text-xl text-gray-500">Month</span>
          </div>
          <ul class="space-y-5 my-5">
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Access to Free & Paid snippets</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Unlimited Snippets download</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Online Editor</span
              >
            </li>
            <li class="flex items-center line-through decoration-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Unlimted Fork Snippets</span
              >
            </li>
            <li class="flex items-center line-through decoration-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Ads Free</span
              >
            </li>
            <li class="flex items-center line-through decoration-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >All Tools</span
              >
            </li>
          </ul>
          <button
            class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none rounded-lg px-4 py-2 font-medium w-full"
          >
            Buy Now
          </button>
        </div>

<div
          class="w-full p-6 border border-gray-200 rounded-lg border-t-green-500 border-t-4 shadow-lg scale-105 bg-white"
        >
          <h4 class="mb-4 text-3xl">Pro Plan</h4>
          <div>
            <span class="text-3xl font-semibold">$</span>
            <span class="text-5xl font-semibold">49</span>
            <span class="text-xl text-gray-500">Month</span>
          </div>
          <ul class="space-y-5 my-5">
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Access to Free & Paid snippets</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Unlimited Snippets download</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Online Editor</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                fill="currentColor"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Unlimted Fork Snippets</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                fill="currentColor"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Ads Free</span
              >
            </li>
            <li class="flex items-center line-through decoration-gray-500">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >All Tools</span
              >
            </li>
          </ul>
          <button
            class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none rounded-lg px-4 py-2 font-medium w-full"
          >
            Buy Now
          </button>
        </div>

<div
          class="w-full p-6 border border-gray-200 rounded-lg border-t-red-500 border-t-4 shadow hover:shadow-xl transition"
        >
          <h4 class="mb-4 text-3xl">Business Plan</h4>
          <div>
            <span class="text-3xl font-semibold">$</span>
            <span class="text-5xl font-semibold">69</span>
            <span class="text-xl text-gray-500">Month</span>
          </div>
          <ul class="space-y-5 my-5">
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Access to Free & Paid snippets</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Unlimited Snippets download</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                viewBox="0 -960 960 960"
                fill="currentColor"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Online Editor</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                fill="currentColor"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Unlimted Fork Snippets</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                fill="currentColor"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >Ads Free</span
              >
            </li>
            <li class="flex items-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 text-blue-700 me-2"
                fill="currentColor"
                viewBox="0 -960 960 960"
              >
                <path
                  d="m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
                />
              </svg>
              <span class="text-base font-normal leading-tight text-gray-500"
                >All Tools</span
              >
            </li>
          </ul>
          <button
            class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none rounded-lg px-4 py-2 font-medium w-full"
          >
            Buy Now
          </button>
        </div>
      </div>
    </div>
  </body>
</html>

Related Examples

Pricing Table

Author:
Akshay

3 years ago

10.7k
Product card for eCommerce website

Author:
Steven Kuhn

3 years ago

12.2k
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

23k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.4k
Product / Service pricing section

Author:
Sophia Baker

2 years ago

12.4k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.5k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.3k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

18.3k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.8k
Product card
sleek and modern product card

Author:
OmKar Mehta

1 year ago

5.9k
Card
Card

Author:
Aman kumar

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components