Create Simple Price Table in CSS

In this tutorial I am going to share simple HTML CSS based Price table created by Robin Brons which you can add on your website to display different different product or services plan to your customer. When building a pricing table, you want to make sure that you have the features listed that are going to be the most important to people using/paying for your service.

HTML

Create simple html to display printable for your different different plan.

="promos">  
="promo">
  
="deal">
    >Premium>
    >This is really a good deal!>
  
>
  ="price">$79>
  
="features">
    
>Some great feature
>
    
>Another super feature
>
    
>And more...
>   
  
>
  >Sign up>
>
="promo scale">
  
="deal">
    >Plus>
    >This is really a good deal!>
  
>
  ="price">$89>
  
="features">
    
>Some great feature
>
    
>Another super feature
>
    
>And more...
>   
  
>
  >Sign up>
>
="promo">
  
="deal">
    >Basic>
    >Basic membership>
  
>
  ="price">$69>
  
="features">
    
>Choose the one on the left
>
    
>We need moneyy
>
    
>And more...
>   
  
>
  >Sign up>
>
>

CSS

Styling your price table.

See live demo and download source code.

Visit official repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.

Related