JSFiddle - React, Tailwind, and code Playground

CSS3 pricing table

by Jennifer Perrin

HTML

<div id="pricing-table">
    <div class="plan plan1">
        <div class="header">Enterprise</div>
        <div class="price">$59</div>  
        <div class="monthly">per month</div>      
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>            
        </ul>
        <a class="signup" href="">Sign up</a>         
    </div >
    <div class="plan plan2">
        <div class="header">Professional</div>
        <div class="price">$29</div>
        <div class="monthly">per month</div>  
        <ul>
            <li><b>5GB</b> Disk Space</li>
            <li><b>50GB</b> Monthly Bandwidth</li>
            <li><b>10</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>            
        </ul>
        <a class="signup" href="">Sign up</a>            
    </div>
    <div class="plan plan3">
        <div class="header">Standard</div>
        <div class="price">$19</div>
        <div class="monthly">per month</div>
        <ul>
            <li><b>3GB</b> Disk Space</li>
            <li><b>25GB</b> Monthly Bandwidth</li>
            <li><b>5</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>            
        </ul>
        <a class="signup" href="">Sign up</a>        
    </div>
    <div class="plan plan4">
        <div class="header">Basic</div>
        <div class="price">$9</div>
        <div class="monthly">per month</div>
        <ul>
            <li><b>1GB</b> Disk Space</li>
            <li><b>10GB</b> Monthly Bandwidth</li>
            <li><b>2</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>            
        </ul>
        <a class="signup" href="">Sign up</a>        
    </div>     
</div>

CSS

body {
        background: #eee url("http://jenniferperrin.com/image/background.gif");
    }
    
    /* --------------- */
        
    #pricing-table {
        margin: 40px auto;
        text-align: center;
        width: 928px; /* total computed width */
        zoom: 1;
    }

    #pricing-table:before, #pricing-table:after {
      content: "";
      display: table
    }

    #pricing-table:after {
      clear: both
    }

    /* --------------- */    

    #pricing-table .plan {
        font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
        background: #222;      
        border: 1px solid #444;
        color: #efefef;
        padding: 20px;
        width: 180px;
        float: left;
        _display: inline; /* IE6 double margin fix */
        position: relative;
        margin: 0 5px;
        -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
        -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
        box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);        
    }

    #pricing-table .plan:after {
      z-index: -1; 
      position: absolute; 
      content: "";
      bottom: 10px;
      right: 4px;
      width: 80%; 
      top: 80%; 
      -webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);   
      -moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
      box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
      -webkit-transform: rotate(3deg);    
      -moz-transform: rotate(3deg);   
      -o-transform: rotate(3deg);
      -ms-transform: rotate(3deg);
      transform: rotate(3deg);    
    }    
    
    #pricing-table .popular-plan {
        top: -20px;
        padding: 40px 20px;   
    }
    
    /* --------------- */    

    #pricing-table .header {
        position: relative;
        font-size: 20px;
        font-weight: normal;
        text-transform: uppercase;
        padding: 40px;
        margin: -20px -20px 20px -20px;
        border-bottom: 8px solid;
        background-color: #444;
        background-image:...