Pricing Tables

by dhavaljani

HTML

<ul class="pricing-block">
    <li><h3 class="planname">Single</h3></li>
    <li><span class="planprice">$99</span></li>
    <li><strong>1 Active Job</strong></li>
    <li>Unlimited Candidates</li>
    <li>Social Recruiting</li>
    <li>Applicant Tracking</li>
    <li>Branded Career Site</li>
    <li>Unlimited Recruiters</li>
    <li>Mobile Applications</li>
    <li><a class="btn btn-primary">Sign Up</a></li>
</ul>
<ul class="pricing-block">
    <li><h3 class="planname">Single</h3></li>
    <li><span class="planprice">$99</span></li>
    <li><strong>1 Active Job</strong></li>
    <li>Unlimited Candidates</li>
    <li>Social Recruiting</li>
    <li>Applicant Tracking</li>
    <li>Branded Career Site</li>
    <li>Unlimited Recruiters</li>
    <li>Mobile Applications</li>
    <li><a class="btn btn-primary">Sign Up</a></li>
</ul>

CSS

body {
    background-color: #5da41f;
}
.pricing-block{
    display: inline-block;
    list-style-type: none;
    text-align: center;
    padding: 0;
    background-color: #fff;
    width: 280px;
    border-radius: 5px;
    border: 1px solid #b1d194;
}
.pricing-block li {
    line-height: 28px;
}
.pricing-block li .btn {
    margin-top: 20px;
    margin-bottom: 30px;
    display: block;
}
.pricing-block h3.planname {
    background: #589a1d;
    margin: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    line-height: 36px;
}