# 📒 Pricing Component Design System 

Tailwind CSS Pricing component highlights different packages of a website's offerings at various price points. They can be used to highlight the features and benefits that the user would be getting in a package. The pricing Tailwind component category has 10 different variations of feature sections for various use cases. The components are easily customizable so users can make any styling changes or even come up with something themselves using these components or their elements as a base.

![image](https://user-images.githubusercontent.com/98400348/232882821-98b6050e-ce40-462d-a3f9-98b21cfd61d3.png)


## General convention to follow :


### **Border-radius** :

Border radius of each card is `rounded-2xl` 

### Hover Color

For one of different design of this same component the hover color of buttton is:- <br/>
**`hover:bg-blue-700`** for Blue theme Button, <br/>
**`hover:bg-slate-800`** for Dark theme Button, and  <br/>
**`hover:bg-slate-200`** for White theme Button <br/>

### **Overlay:**
-Image overlay color with opacity in same feature `bg-gray-800/50` 

### **Paddings :**

The padding could be variable depending on the card sizes and UI requirements but normally it is `p-6`

### Font :

|  | heading | Normal text | sub text | badge type |
| --- | --- | --- | --- | --- |
| size | text-2xl | text-lg | text-sm | text-sm / text-md |
| font-weight | semi-bold | semibold / normal | normal | normal |

### Color :

|  | Dark | Blue | White |
| --- | --- | --- | --- |
| Background Color | bg-slate-900 | bg-white | bg-white |
| text color | text-white | text-blue-600/text-slate-900 | text-slate-900 |

`Note` : Color of the text `[color]` will depend on the color of the background

### Width & heights :

The width of the component totally depends on the design.

The height of the components depends on the amount of content on it. We need to make it auto. **Giving a fixed height is not recommended at all.** 

---

### Buttons :

We need to use the already built buttons for this. **[Buttons](https://github.com/Clueless-Community/seamless-ui/tree/main/Buttons)** 🔗 . Don’t use any buttons outside this.

### Star Ratings :

We need to use the already built ratings for this. **[Ratings](https://github.com/Clueless-Community/seamless-ui/tree/main/Rating)** 🔗 . Don’t use any ratings outside this.

### Icons :

Icons must be used from **[Heroicons](https://heroicons.com/)** 

**Note :** You need to use a solid 24X24 SVG form heroicons.

### Add to Favourite

For this we will use button given below.

## Example Code :
This is the example code of the `Product Cards/src/product-card-1.html`

```html

<!--For Pricing card-0 -->
<div class="m-10 shadow-lg rounded-2xl h-170 w-80 bg-white border-2 border-blue-400 p-10">
    <!-- Free -->
    <h3 class="text-darkBlue text-2xl text-center mb-10 font-semibold">
        FREE
    </h3>
    <!-- Heading 1 -->
    <p class="m-10 max-w-10 h-30 text-gray-600 text-center text-lg font-base mt-4 overflow-auto">
        Organize across all apps by hand
    </p>
    <!-- Price -->
    <div class="mx-10 px-5 flex text-blue-600 font-semibold">
        <h1 class="text-5xl my-1">
            0
        </h1>
        <div class="ml-3 flex flex-col">
            <div class="h-auto text-2xl" >
                $
            </div>
            <span class="text-sm opacity-50">
                Per month
            </span>
        </div>
    </div>
    <!-- List -->
    <ul class="text-base text-darkBlue-600 w-full my-10">
        <!-- Item 1 -->
        <li class="my-5 flex items-center">
            <svg class="h-6 w-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><rect width="32" height="32" fill="#3DBB77" rx="16"/><g clip-path="url(#a)"><path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)"/></clipPath></defs></svg>
            Unlimited product updates
        </li>
        <!-- Item 2 -->
        <li class="my-5 flex items-center ">
            <svg class="h-6 w-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><rect width="32" height="32" fill="#3DBB77" rx="16"/><g clip-path="url(#a)"><path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)"/></clipPath></defs></svg>
            Unlimited product updates
        </li>
        <!-- Item 3 -->
        <li class="my-5 flex items-center ">
            <svg class="h-6 w-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><rect width="32" height="32" fill="#3DBB77" rx="16"/><g clip-path="url(#a)"><path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)"/></clipPath></defs></svg>
            Unlimited product updates
        </li>
        <!-- Item 4 -->
        <li class="my-5 flex items-center ">
            <svg class="h-6 w-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><rect width="32" height="32" fill="#BDBDBD" rx="16"/><g clip-path="url(#a)"><path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)"/></clipPath></defs></svg>
            1GB Cloud storage
        </li>
        <!-- Item 5 -->
        <li class="my-5 flex items-center">
            <svg class="h-6 w-8 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32"><rect width="32" height="32" fill="#BDBDBD" rx="16"/><g clip-path="url(#a)">
                <path fill="#fff" fill-rule="evenodd" d="M24.296 10.204a.698.698 0 0 1 0 .985l-9.738 9.738a.694.694 0 0 1-.985 0l-4.869-4.869a.697.697 0 0 1 .985-.985l4.376 4.378 9.246-9.247a.698.698 0 0 1 .985 0Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v11H0z" transform="translate(8 10)"/></clipPath></defs>
            </svg>
            Email and community support
        </li>
    </ul>
    <!-- Button -->
    <button type="button" class="py-5 px-5  bg-blue-600 hover:bg-blue-700 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-md ">
        Try for free
    </button>
</div>

<!--For Pricing card-1 -->
<div class="h-[662px] w-[326px] rounded-[20px] border border-[#1855CB]">
  <svg class="mx-auto mt-[50px]" width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="96" height="96" rx="48" fill="#1855CB" />
    <g clip-path="url(#clip0_688_3820)">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M69.418 66.6667C69.418 66.6667 72.5013 66.6667 72.5013 63.5556C72.5013 60.4445 69.418 51.1112 57.0846 51.1112C44.7513 51.1112 41.668 60.4445 41.668 63.5556C41.668 66.6667 44.7513 66.6667 44.7513 66.6667H69.418ZM44.8191 63.5556H69.3501C69.3646 63.5539 69.379 63.5518 69.3933 63.5494L69.418 63.5432C69.4118 62.7218 68.903 60.3387 67.0746 58.192C65.3726 56.1791 62.3818 54.2223 57.0846 54.2223C51.7906 54.2223 48.7997 56.1823 47.0946 58.192C45.2662 60.3387 44.7544 62.7249 44.7513 63.5432C44.7739 63.5475 44.7965 63.5517 44.8191 63.5556ZM57.0846 44.8889C58.7201 44.8889 60.2887 44.2334 61.4451 43.0665C62.6016 41.8996 63.2513 40.3169 63.2513 38.6667C63.2513 37.0165 62.6016 35.4338 61.4451 34.2669C60.2887 33.1 58.7201 32.4445 57.0846 32.4445C55.4491 32.4445 53.8806 33.1 52.7241 34.2669C51.5677 35.4338 50.918 37.0165 50.918 38.6667C50.918 40.3169 51.5677 41.8996 52.7241 43.0665C53.8806 44.2334 55.4491 44.8889 57.0846 44.8889ZM66.3346 38.6667C66.3346 39.8924 66.0954 41.106 65.6305 42.2384C65.1657 43.3708 64.4843 44.3997 63.6254 45.2664C62.7664 46.133 61.7467 46.8205 60.6245 47.2896C59.5022 47.7586 58.2994 48 57.0846 48C55.8699 48 54.6671 47.7586 53.5448 47.2896C52.4226 46.8205 51.4028 46.133 50.5439 45.2664C49.685 44.3997 49.0036 43.3708 48.5387 42.2384C48.0739 41.106 47.8346 39.8924 47.8346 38.6667C47.8346 36.1914 48.8092 33.8174 50.5439 32.067C52.2786 30.3167 54.6314 29.3334 57.0846 29.3334C59.5379 29.3334 61.8907 30.3167 63.6254 32.067C65.3601 33.8174 66.3346 36.1914 66.3346 38.6667ZM44.554 51.9823C43.3206 51.5904 42.0492 51.3328 40.7615 51.2138C40.0379 51.1444 39.3115 51.1101 38.5846 51.1112C26.2513 51.1112 23.168 60.4445 23.168 63.5556C23.168 65.6307 24.1947 66.6667 26.2513 66.6667H39.2506C38.7935 65.6955 38.5656 64.6306 38.5846 63.5556C38.5846 60.4134 39.7471 57.2027 41.9455 54.5209C42.6947 53.6063 43.5673 52.7507 44.554 51.9823ZM38.338 54.2223C33.195 54.2845 30.2751 56.2134 28.5946 58.192C26.7539 60.3512 26.2513 62.7436 26.2513 63.5556H35.5013C35.5013 60.3045 36.4972 57.0658 38.338 54.2223ZM27.793 40.2223C27.793 37.7469 28.7675 35.3729 30.5022 33.6226C32.2369 31.8723 34.5897 30.8889 37.043 30.8889C39.4962 30.8889 41.849 31.8723 43.5837 33.6226C45.3184 35.3729 46.293 37.7469 46.293 40.2223C46.293 42.6976 45.3184 45.0716 43.5837 46.8219C41.849 48.5723 39.4962 49.5556 37.043 49.5556C34.5897 49.5556 32.2369 48.5723 30.5022 46.8219C28.7675 45.0716 27.793 42.6976 27.793 40.2223ZM37.043 34C35.4075 34 33.839 34.6556 32.6825 35.8225C31.526 36.9894 30.8763 38.572 30.8763 40.2223C30.8763 41.8725 31.526 43.4551 32.6825 44.622C33.839 45.7889 35.4075 46.4445 37.043 46.4445C38.6785 46.4445 40.247 45.7889 41.4035 44.622C42.5599 43.4551 43.2096 41.8725 43.2096 40.2223C43.2096 38.572 42.5599 36.9894 41.4035 35.8225C40.247 34.6556 38.6785 34 37.043 34Z" fill="white" />
    </g>
    <defs>
      <clipPath id="clip0_688_3820">
        <rect width="48" height="39.5295" fill="white" transform="translate(23.5 28)" />
      </clipPath>
    </defs>
  </svg>
  <div class="mx-auto mt-[35px] h-8 w-[104px]">
    <p class="text-[24px] leading-[32px] font-bold text-[#252B42]">Standard</p>
  </div>
  <div class="mx-auto mt-[35px] h-[48px] w-[148px]">
    <p class="text-center font-bold text-[16px] leading-[24px] text-[#737373]">Organize across all apps by hand</p>
  </div>

  <div class="mx-auto mt-[35px] flex h-[57px] w-[113px] font-semibold text-[#1855CB]">
    <div class="flex items-center justify-center text-[40px]">0</div>
    <div class="ml-3 flex flex-col">
      <div class="h-auto text-2xl">$</div>
      <span class="w-[79px] text-[16px] leading-[24px] font-bold text-[#8EC2F2]"> Per month </span>
    </div>
  </div>

  <div class="mx-auto mt-[35px] h-[96px] w-[192px] text-sm">
    <p class="text-center text-[14px] leading-[24px] font-semibold text-[#737373]">Slate helps you see how many more days you need to work to reach your financial goal for the month and year.</p>
  </div>

  <div class="mt-[35px] text-center">
    <button class="w-fit px-[85.5px] py-[15px] rounded-[5px] bg-[#1855CB]">
      <p class="text-white">Try for Free</p>
    </button>
  </div>
</div>

<!--For Pricing card-2 -->
<!--Pricing-Card -->
<div class="relative m-10 w-full max-w-[327px] rounded-[20px] bg-white py-[50px] px-[40px]">
  <!-- Label -->
  <div class="absolute -top-8 right-4 flex h-[90px] w-[90px] items-center justify-center rounded-full bg-[#e77c40] text-2xl font-bold text-white">New</div>
  <!-- Card Container -->
  <div class="flex w-full flex-col items-center justify-center gap-[35px] tracking-[0.2px]">
    <!-- Title -->
    <h1 class="text-[24px] font-bold leading-[32px] text-[#252b42]">FREE</h1>
    <!-- Subtitle -->
    <h2 class="w-40 text-center text-base font-bold text-[#737373]">Organize across all apps by hand</h2>
    <!-- Pricing -->
    <div class="flex flex-col items-center justify-center">
      <!-- Price Amount -->
      <h1 class="text-[40px] font-bold text-[#1855cb]">19$</h1>
      <!-- Subscription Duration -->
      <p class="text-base font-bold text-[#8ec2f2]">Per Month</p>
    </div>
    <!-- CTA Button -->
    <button class="w-full rounded-[5px] bg-[#1855cb] py-[15px] px-[40px] text-[14px] font-normal text-white">Try for free</button>
    <!-- Features -->
    <div class="flex w-full flex-col items-center justify-center gap-4">
      <!-- Feature-Item -->
      <div class="flex w-full items-center justify-start gap-[8px]">
        <!-- Icon -->
        <div class="h-[32px] w-[32px]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3dbb77" className="w-6 h-6">
            <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
          </svg>
        </div>
        <!-- Description -->
        <p class="text-[14px] font-medium text-[#252b42]">Unlimited product updates</p>
      </div>
      <!-- Feature-Item -->
      <div class="flex w-full items-center justify-start gap-[8px]">
        <!-- Icon -->
        <div class="h-[32px] w-[32px]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3dbb77" className="w-6 h-6">
            <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
          </svg>
        </div>
        <!-- Description -->
        <p class="text-[14px] font-medium text-[#252b42]">Unlimited product updates</p>
      </div>
      <!-- Feature-Item -->
      <div class="flex w-full items-center justify-start gap-[8px]">
        <!-- Icon -->
        <div class="h-[32px] w-[32px]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3dbb77" className="w-6 h-6">
            <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
          </svg>
        </div>
        <!-- Description -->
        <p class="text-[14px] font-medium text-[#252b42]">Unlimited product updates</p>
      </div>
      <!-- Feature-Item -->
      <div class="flex w-full items-center justify-start gap-[8px]">
        <!-- Icon -->
        <div class="h-[32px] w-[32px]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#bdbdbd" className="w-6 h-6">
            <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
          </svg>
        </div>
        <!-- Description -->
        <p class="text-[14px] font-medium text-[#252b42]">1GB Cloud Storage</p>
      </div>
      <!-- Feature-Item -->
      <div class="flex w-full items-center justify-start gap-[8px]">
        <!-- Icon -->
        <div class="h-[32px] w-[32px]">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#bdbdbd" className="w-6 h-6">
            <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
          </svg>
        </div>
        <!-- Description -->
        <p class="text-[14px] font-medium text-[#252b42]">Email and community support</p>
      </div>
    </div>
  </div>
</div>

<!--For Pricing card-3 -->
<!--pricingstyle:4-->
  <!--border-->
  <div class="relative h-[355px] w-[326px] rounded-2xl border border-[#1855CB] bg-white py-[35px] px-[35px]">
    <div class="gap-35px flex-none font-sans font-semibold tracking-[0.1px]">
      <!--Heading-->
      <div class="text-2xl leading-8 text-[#252B42]">
        <h3>FREE</h3>
      </div>
      <!--Sub-heading-->
      <div class="w-3/5 pt-[30px] text-base leading-6 text-[#737373]">
        <h3>Organize across all apps by hand</h3>
      </div>
      <!--include 0-->

      <div class="flex pt-[30px] text-4xl leading-[57px] text-[#1855CB]">
        <h2>0</h2>

        <!--dollar-->
        <div class="flex flex-col pl-[15px] text-2xl leading-8 text-[#1855CB]">
          <h3>$</h3>
          <!--month elemenet-->
          <div class="text-base leading-6 text-[#8EC2F2]">
            <h5>Per Month</h5>
          </div>
        </div>
      </div>
      <!--button-->
      <div class="ga pt-[30.5px]">
        <button class="w-full rounded-md bg-[#1855CB] py-[17px] px-[40px] text-sm tracking-[0.2px] text-white">Try for free</button>
      </div>
    </div>
  </div>

<!--For Pricing card-4 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<div class="text-center leading-6 border border-blue-600 rounded-3xl " style="width: 292px;height:468px;padding: 50px 30px; font-family: 'Poppins', sans-serif;font-style: normal;">
    <div class="text-slate-500 text-base font-bold leading-6" style="letter-spacing: 0.2px;margin-bottom: 40px;">
        <p>Organize across all</p>
         <p>apps by hand</p>
    </div>

    <div class="font-bold" style="font-size: 40px;line-height: 57px;letter-spacing: 0.2px;margin-bottom: 40px;">
        <p>Free</p>
    </div>

    <div class="text-slate-500 text-sm leading-6" style="letter-spacing: 0.2px;margin-bottom: 50px;">
        <p>Slate helps you see how</p>
        <p>many more days you need to</p>
        <p>work to reach your financial</p>
        <p>goal for the month and year.</p>
    </div>

    <div>
        <span class="font-bold text-slate-300 tracking-wide" style="margin-right: 20px;">from</span><span class="font-bold " style="width:49px;height:57px;color: #1855CB;letter-spacing: 0.2px;font-size: 40px;">1$</span>
    </div>
</div>

<!--For Pricing card-5 -->
<div class="h-auto w-fit rounded-[20px] border-2 border-[#1855CB] p-[50px]">
  <div class="mx-auto flex w-fit flex-col-reverse items-center gap-[30px] sm:flex-row">
    <div class="space-y-[15px] text-center sm:text-start">
      <p class="text-[24px] font-bold leading-[32px] tracking-[0.1] text-[#1855CB]">STANDARD</p>
      <p class="w-[192px] text-[14px] font-semibold leading-[24px] tracking-[0.2] text-[#3DBB77]">Most calendars are designed for teams. Slate is designed for freelancers who want a simple way</p>
    </div>
    <div class="space-y-[10px]">
      <div class="flex justify-center gap-[10px] sm:justify-start">
        <p class="text-[40px] font-bold leading-[57px] tracking-[0.2] text-[#1855CB]">0</p>
        <div>
          <p class="text-[24px] font-bold leading-[32px] tracking-[0.1] text-[#1855CB]">$</p>
          <p class="tex-[16px] font-bold leading-[24px] text-[#8EC2F2]">Per Month</p>
        </div>
      </div>
      <div>
        <button class="tex-[14px] rounded-[5px] bg-[#1855CB] px-[40px] py-[15px] font-bold leading-[28px] text-white">Try for free</button>
      </div>
    </div>
  </div>
</div>

```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.
  

