pricing_table_tiers.html

<div class="pricing-table">
   <div class="pricing-header d-flex flex-wrap align-items-center">
      <div class="column--first table-name">
         <div class="pricing-title sw-pricing-title--big sw-font-family-default">Features</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="pricing-title">Free</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="pricing-title">Starter</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="pricing-title">Professional</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="pricing-title">Businesss</div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Number of applications</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">Unlimited</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">Unlimited</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">Unlimited</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">Unlimited</div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Number of collaborators</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">1</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">1</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">2</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">5</div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Number of custom domains</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">1</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">1</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">2</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">3</div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Pre-built Templates</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Embed Softr site</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">&nbsp;</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Custom code (HTML/CSS/JavaScript)</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">&nbsp;</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
   </div>
   <div class="features d-flex flex-wrap">
      <div class="column--first">
         <div class="pricing-title pricing-title--set-1 sw-font-family-default">Transfer Applications</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">&nbsp;</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description">&nbsp;</div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
      <div class="sw-pricing-column sw-font-family-default">
         <div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
      </div>
   </div>
</div>

pricing_table_tiers_css.html

<style>
#pricing-tiers .sw-pricing-column{
     max-width: 18%;
     flex: 0 0 18%;
     text-align: center;
     padding: 16px 15px;
     box-sizing: border-box;
}
 #pricing-tiers .pricing-table .features:not(.buttons-row):hover{
     background-color: #f3f4f8;
}
 #pricing-tiers .pricing-table .features{
     align-items: baseline;
}
 #pricing-tiers .pricing-table {
     border-top: 1px solid #f3f4f8;
     padding: 30px 0;
}
 #pricing-tiers .pricing-header {
     margin-bottom: .83333333vw;
}
 #pricing-tiers .table-name{
     font-weight: 500;
}
 #pricing-tiers .column--first{
     max-width: 28%;
     flex: 0 0 28%;
     text-align: left;
     color: #1C2B41;
     font-size: 18px;
     padding: 10px 12px;
}
 #pricing-tiers .pricing-tier{
     font-size: 18px;
}
 #pricing-tiers .pricing-title{
     color: #1C2B41;
     position: relative;
     font-size: 1.16666667vw;
     line-height: 1.66666667vw;
     font-weight: 500;
}
 #pricing-tiers .sw-pricing-title--big{
     font-size: 1.5vw;
     line-height: 2vw;
     font-weight: 600;
}
 #pricing-tiers .sw-pricing-description{
     color: #9b99af;
     position: relative;
     cursor: default;
     font-size: 1.16666667vw;
     line-height: 1.66666667vw;
}
 #pricing-tiers .sw-pricing-description img.svg {
     width: 1.46666667vw;
     height: 1.46666667vw;
}
 #pricing-tiers .sw-pricing-description svg path{
     fill: #FEB30B;
}
 #pricing-tiers .sw-pricing-description svg circle{
     stroke: #FEB30B;
}
 #pricing-tiers .sw-pricing-description .btn-1--blue{
     display: inline-block;
     text-decoration: none;
     width: 100%;
     background: #FEB30B;
     color: #1C2B41;
     font-size: 1.16666667vw;
     line-height: 3.16666667vw;
     border-radius: .33333333vw;
     margin: 2.91666667vw 0 0;
}
</style>