I purchased the pricing table code from Codecanyon ($6, 18 Tables), and tweaked some to work with Squarespace.

You only need to follow these guide to use them!

All demo here: https://cylinder-mackerel-pnk5.squarespace.com/pricing-table?password=abc

(Access password: abc)

Pricing Table 01. 2 Columns

How to use

1. First, you need to use Text Block to create 2 Pricing Table Boxes.

• Basic – Advanced, 59, Per Year: Normal text
• $: Bold text
• Unlimited, Google Ads,…: List
• Purchase: Text + Link

You will have

2. Insert this code to Page Header or Code Block

<style>
/* BOX 1 */
/* box title */
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:first-child {
    background: #0098D9;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #00A8EE;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:nth-child(3) {
    background: #00A8EE;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576569923601_3772 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #E8EDF0;
}
div#block-yui_3_17_2_1_1576569923601_3772 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576569923601_3772 ul li p {
    border-bottom: 1px solid #E8EDF0;
    padding-bottom: 5px;
}
div#block-yui_3_17_2_1_1576569923601_3772 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:last-child a {
    background: #00A8EE;
    color: #fff;
    padding: 10px 30%;
    display: inline-block;
}
div#block-yui_3_17_2_1_1576569923601_3772>.sqs-block-content>p:last-child a:hover {
    background: #0098D9;
}

/* Box 2 */
/* box title */
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:first-child {
    background: #0082B9;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}

/* box price */
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #0091CE;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:nth-child(3) {
    background: #0091CE;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576569923601_6638 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #E8EDF0;
}
div#block-yui_3_17_2_1_1576569923601_6638 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576569923601_6638 ul li p {
    border-bottom: 1px solid #E8EDF0;
    padding-bottom: 5px;
}
div#block-yui_3_17_2_1_1576569923601_6638 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:last-child a {
    background: #0091CE;
    color: #fff;
    padding: 10px 30%;
    display: inline-block;
}
div#block-yui_3_17_2_1_1576569923601_6638>.sqs-block-content>p:last-child a:hover {
    background: #0091CE;
}
/* Box on Table */
@media screen and (min-width:641px) and (max-width:900px) {
div#page-5df88c3ca830845e03f381c6 .span-2 {
    display: none !important;
}
div#page-5df88c3ca830845e03f381c6 .span-4 {
    width: 50%;
}
}
</style>

Explain

• body#block-yui is Block ID of Box 1 & Box 2. See how to find Block ID.
• div#page-…: You can replace it with Page ID. See how to find Page ID.
• I have noted down comments for each code, so you can try each value as you like.

If you want to learn CSS to create things like the ones above, see this course.

Pricing Table Style 02. 4 Columns

How to use

1. First, you need to use Text Block to create 4 Pricing Table Boxes.

• Basic, Pro, Developer, Agency, 59, Per Year: Normal text
• $: Bold text
• Unlimited, Google Ads,…: List
• Purchase: Text + Link

2. Insert this code to Page Header or Code Block

<style>
/* Pricing Table 2 */
/* General */
  div#block-yui_3_17_2_1_1576569923601_6301+.row>.span-3 .sqs-block-html {
    padding-left: 0;
    padding-right: 0;
}
  div#block-yui_3_17_2_1_1576569923601_6301+.row>.span-3:nth-child(even) ul {
    background: #f9f9fc;
  }
  div#block-yui_3_17_2_1_1576569923601_6301+.row>.span-3 ul {
    margin-left: -1px;
  }
/* BOX 1 */
/* box title */
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:first-child {
    background: #37A8AF;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #47BAC1;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:nth-child(3) {
    background: #47BAC1;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576633591231_5554 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #E8EDF0;
}
div#block-yui_3_17_2_1_1576633591231_5554 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576633591231_5554 ul li p {
    border-bottom: 1px solid #E8EDF0;
    padding-bottom: 5px;
}
div#block-yui_3_17_2_1_1576633591231_5554 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:last-child a {
    background: #47BAC1;
    color: #fff;
    padding: 10px 10%;
    display: inline-block;
}
div#block-yui_3_17_2_1_1576633591231_5554>.sqs-block-content>p:last-child a:hover {
    background: #37A8AF;
}

/* Box 2 */
/* box title */
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:first-child {
    background: #2F8F95;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #37A8AF;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:nth-child(3) {
    background: #37A8AF;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576633591231_6799 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #E8EDF0;
}
div#block-yui_3_17_2_1_1576633591231_6799 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576633591231_6799 ul li p {
    border-bottom: 1px solid #E8EDF0;
    padding-bottom: 5px;
}
div#block-yui_3_17_2_1_1576633591231_6799 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:last-child a {
    background: #37A8AF;
    color: #fff;
    padding: 10px 10%;
    display: inline-block;
}
div#block-yui_3_17_2_1_1576633591231_6799>.sqs-block-content>p:last-child a:hover {
    background: #2F8F95;
}
/* Box 3 */
  /* box title */
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:first-child {
    background: #37A8AF;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #47BAC1;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:nth-child(3) {
    background: #47BAC1;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576633591231_8908 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #E8EDF0;
}
div#block-yui_3_17_2_1_1576633591231_8908 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576633591231_8908 ul li p {
    border-bottom: 1px solid #E8EDF0;
    padding-bottom: 5px;
}
div#block-yui_3_17_2_1_1576633591231_8908 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:last-child a {
    background: #47BAC1;
    color: #fff;
    padding: 10px 10%;
    display: inline-block;
}
div#block-yui_3_17_2_1_1576633591231_8908>.sqs-block-content>p:last-child a:hover {
    background: #37A8AF;
}
/* Box 4 */
  /* box title */
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:first-child {
    background: #2F8F95;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #37A8AF;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:nth-child(3) {
    background: #37A8AF;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576633591231_11131 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    background: #fff;
    border: 1px solid #E8EDF0;
}
div#block-yui_3_17_2_1_1576633591231_11131 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576633591231_11131 ul li p {
    border-bottom: 1px solid #E8EDF0;
    padding-bottom: 5px;
}
div#block-yui_3_17_2_1_1576633591231_11131 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:last-child a {
    background: #37A8AF;
    color: #fff;
    padding: 10px 10%;
    display: inline-block;
}
div#block-yui_3_17_2_1_1576633591231_11131>.sqs-block-content>p:last-child a:hover {
    background: #2F8F95;
}
</style>

Pricing Table Style 02. 4 Columns – Dark

How to use

1. Using Text Block to create 4 Blocks

• Box 1. 3 blank paragraphs, List
• Box 2. Paragraph (Basic, $, 59, per Year) – $ is Bold Text – List (Unlimited, Analytics,…) – Text Link (Purchase)
• Box 3, 4. Similar Box 2

2. Paste this code to Page Header or Code Block

<style>
/* General */
/* remove padding between boxes */
div#block-yui_3_17_2_1_1576651735825_197944+.row>.col>.sqs-block-html {
    padding-left: 0;
    padding-right: 0;
}
/* All Box */
div#block-yui_3_17_2_1_1576651735825_197944+.row ul {
    background: #354153;
    border: 1px solid #293341;
    border-top: 1px solid #293341;
    margin-left: -1px;
}
div#block-yui_3_17_2_1_1576651735825_197944+.row ul li {
    border-top: 1px solid #424F64;
    border-bottom: 1px solid #293341;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    color: #A0ABBF;
    list-style: none;
}
/* remove dot */
div#block-yui_3_17_2_1_1576651735825_197944+.row li p:before {
    display: none;
}
/* Center box 2-3-4 */
div#block-yui_3_17_2_1_1576651735825_197944+.row .span-3:not(:first-child) li {
    text-align: center;
}
/* Purchase container background */
div#block-yui_3_17_2_1_1576651735825_197944+.row>.col:not(:first-child)>.sqs-block-html .sqs-block-content>p:last-child {
    background: #354153;
    border: 1px solid #293341;
    border-top: 1px solid #424F64;
}
/* Font */
div#block-yui_3_17_2_1_1576651735825_197944+.row * {
    font-family: monospace;
}
div#block-yui_3_17_2_1_1576651735825_197944+.row .sqs-block-content>p:last-child a {
  color: #fff;
    padding: 10px 40px;
    display: inline-block;
}
/* Box 1 */
/* Align */
div#block-yui_3_17_2_1_1576651735825_200435>.sqs-block-content>p:nth-child(3) {
    padding-top: 0;
    padding-bottom: 5px;
}
/* List */
div#block-yui_3_17_2_1_1576651735825_200435 ul {
    padding-left: 0;
    background: #354153;
    border-color: #354153;
    border-top: 1px solid #354153;
}
/* Box 2 */
/* box title */
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:first-child {
    background: #0098D9;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #00A8EE;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:nth-child(3) {
    background: #00A8EE;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576651735825_205299 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    background: #fff;
}
div#block-yui_3_17_2_1_1576651735825_205299 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576651735825_205299 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:last-child a {
    background: #00A8EE;
}
div#block-yui_3_17_2_1_1576651735825_205299>.sqs-block-content>p:last-child a:hover {
    background: #0098D9;
}
/* Box 3 - Featured Box */
/* box title */
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:first-child {
    background: #0082B9;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:nth-child(2) {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    background: #0091CE;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 30px;
}
/* small price */
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:nth-child(3) {
    background: #0091CE;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 9px;
}
/* Box list */
div#block-yui_3_17_2_1_1576651735825_215772 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    background: #fff;
}
div#block-yui_3_17_2_1_1576651735825_215772 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576651735825_215772 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:last-child {
    margin-top: 0;
    padding: 40px 30px;
}
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:last-child a {
    background: #07A;
}
div#block-yui_3_17_2_1_1576651735825_215772>.sqs-block-content>p:last-child a:hover {
    background: #006895;
}
div#block-yui_3_17_2_1_1576651735825_215772 .sqs-block-content {
    margin-top: -20px;
    -webkit-box-shadow: rgba(0,0,0,.5) 0 0 9px 0;
    -moz-box-shadow: rgba(0,0,0,.5) 0 0 9px 0;
    -o-box-shadow: rgba(0,0,0,.5) 0 0 9px 0;
    box-shadow: rgba(0,0,0,.5) 0 0 9px 0;
}
/* Box 4 */
/* box title */
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:first-child {
    background: #0098D9;
    color: #fff;
    padding: 5px;
    margin-bottom: 0;
}
/* box price */
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:nth-child(2) {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background: #00A8EE;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 20px;
}
/* small price */
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:nth-child(2) strong {
    font-size: 20px;
    position: relative;
    top: -20px;
}
/* box per year */
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:nth-child(3) {
    background: #00A8EE;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* Box list */
div#block-yui_3_17_2_1_1576651735825_226530 ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    background: #fff;
}
div#block-yui_3_17_2_1_1576651735825_226530 ul p:before {
    display: none;
}
div#block-yui_3_17_2_1_1576651735825_226530 ul li:last-child p {
    border-bottom: none;
    padding-bottom: 0;
}
/* Box Link */
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:last-child {
    background: #fff;
    margin-top: 0;
    padding: 30px;
    border: 1px solid #E8EDF0;
    border-top: none;
    text-align: center;
}
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:last-child a {
    background: #00A8EE;
}
div#block-yui_3_17_2_1_1576651735825_226530>.sqs-block-content>p:last-child a:hover {
    background: #0098D9;
}
/* Responsive */
/* Tablet */
@media screen and (max-width:900px) and (min-width:641px) {
  /* Purchase Button */
  div#block-yui_3_17_2_1_1576651735825_197944+.row .sqs-block-content>p:last-child a {
    padding: 5px 15px !important;
    font-size: 14px;
}  
}
/* Mobile */
@media screen and (max-width: 640px) {
  /* Hide box 1 */
  div#block-yui_3_17_2_1_1576651735825_200435 {
    display: none;
}
div#block-yui_3_17_2_1_1576651735825_197944+.row ul {
  margin-left: 0;
}
}
</style>