Pricing Tables

Made similar demo of http://designcurate.com/resource/pricing-tables Original: http://jsfiddle.net/csswizardry/ZDTmD/

by Jens Grochtdreis

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<ul class="pricing-table">
    <li class="plan">
        <h1>Basic</h1>
        <div class="content">
            <ul class="features">
                <li><strong>Full</strong> Email Support</li>
                <li><strong>25GB</strong> of Storage</li>
                <li><strong>5</strong> Domains</li>
                <li><strong>10</strong> Email Addresses</li>
            </ul>
            <hr>
            <p class="price">25</p>
            <p class="footnote">per month</p>
            <a href="#" class="button">Sign Up</a>
        </div>
    </li>
    <li class="plan">
        <h1>Pro</h1>
        <div class="content">
            <ul class="features">
                <li><strong>Full</strong> Email Support</li>
                <li><strong>50GB</strong> of Storage</li>
                <li><strong>10</strong> Domains</li>
                <li><strong>20</strong> Email Addresses</li>
            </ul>
            <hr>
            <p class="price">49</p>
            <p class="footnote">per month</p>
            <a href="#" class="button">Sign Up</a>
        </div>
    </li>
    <li class="plan">
        <h1>Premium</h1>
        <div class="content">
            <ul class="features">
                <li><strong>Full</strong> Email Support</li>
                <li><strong>Unlimited</strong> Storage</li>
                <li><strong>Unlimited</strong> Domains</li>
                <li><strong>50</strong> Email Addresses</li>
            </ul>
            <hr>
            <p class="price">79</p>
            <p class="footnote">per month</p>
            <a href="#" class="button">Sign Up</a>
        </div>
    </li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Rokkitt:400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);

body {
    background-color: rgba(255, 255, 255, 0.75);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0, 0, 0, 0.25) 5px, rgba(0, 0, 0, 0.25) 10px);
    min-height: 100%;
}

.pricing-table {
    margin: 50px auto;
    width: 800px;
}

.plan {
    width: 33%;
    float: left;
    box-shadow: 0 0 10px #999;
    border-radius: 10px 10px 0 0;
    transition: all 250ms linear;
}

.plan h1 {
    text-align: center;
    padding: 10px 0;
    background: #222;
    color: #fff;
    border-radius: 10px 10px 0 0;
    font-family: 'Rokkitt', serif;
    font-size: 1.25rem;
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;
    font-weight: 700;
}

.content {
    padding: 10px 20px;
    background: #fff;
    color: #222;
    font-family: 'Droid Sans', sans-serif;
}

.features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.features li {
    margin: 5px 0;
    padding: 0;
}

.content strong {
    font-weight: 700;
}

.content hr {
    color: #eee;
}

.price {
    text-align: center;
    font-size: 3em;
    font-weight: 700;
}

.price:before {
    content: "$";
    font-size: 0.75em;
    position: relative;
    top: -10px;
    left: -5px;
}

.footnote {
    text-align: center;
    font-size: 0.75em;
    color: #999;
}

.button {
    display: block;
    background: linear-gradient(90deg, #A0B853, #A0CC53);
    padding: 5px 10px;
    width: 100px;
    margin: 20px auto;
    color: #fff;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    font-family: 'Rokkitt', serif;
    box-shadow: 0 0 2px #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
    transition: all 250ms linear;
}

.button:hover {
    background: linear-gradient(90deg, #A0CC53,...

JavaScript

/**
 * http://designcurate.com/resource/pricing-tables
 */